Change image with hover CSS

Make the opacity property, and take advantage of the z-index, so make sure you do not do anything in the .restaurantes_hover image:

.left_corpo .restaurantes{
        position: absolute;
        height: 30%;
        opacity: 1;
        z-index:1;
        width: 17%;
        margin-left: 15%;
        margin-top: 12%;
        cursor: pointer;
}
.left_corpo .restaurantes_hover{
        position: absolute;
        height: 30%;
        width: 17%;
        margin-left: 15%;
        padding-top: 12%;
        cursor: pointer;
}
.restaurantes:hover {
        opacity:0;
}

Here's a jsfiddle suitable for your structure

If you are like display:none it's as if it did not exist, you can do it using Javascript:

function muda(){
  document.getElementById("imgRestaurante").src="<?php echo $restaurantes_hover; ?>";   
}

.left_corpo .restaurantes{
        position: absolute;
        height: 30%;
        width: 17%;
        margin-left: 15%;
        margin-top: 12%;
        cursor: pointer;
}

<div class="left_corpo">
        <div class="restaurantes"><img onmouseover="muda();" id="imgRestaurante" src="<?php echo $restaurantes; ?>" onclick="abrirlayer('layer_restaurantes')"></div>
</div>

Uses :hover selector in parent element. This is because the DIV remains to check for :hover or not ... You can not apply a :hover to the image directly if it is hidden.

Example:

.img-box img.img-hover {
  display: none;
}
.img-box:hover img.img-default {
  display: none;
}
.img-box:hover img.img-hover {
  display: inherit;
}

<div class="img-box">
  <img class="img-default" src="http://placehold.it/332x300"/><imgclass="img-hover" src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
</div>

Pure HTML and CSS works in all browsers ...

Try this:

HTML

 <div class="left_corpo">
    <div class="restaurantes"><img  onclick="abrirlayer('layer_restaurantes')"></div>
</div>

CSS

.restaurantes {
background-image: url(http://images.dailytech.com/nimage/G_is_For_Google_New_Logo_Thumb.png);
text-decoration: none;
background-size:50px;
width:50px;
height:50px;
list-style-type: none;
margin: 0;
}

.restaurantes:hover
{
background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}