Change image with hover CSS

I have two images in html and they are both in the same place on the page. What I want to do is touch the images with hover. I hid an image with display: none and when hover the display is block, but it is not working. Any ideas?

.left_corpo .restaurantes{
        position: absolute;
        height: 30%;
        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%;
        display: none;
        cursor: pointer;
}
.restaurantes:hover + .restaurantes_hover {
        display: block;
}
.restaurantes_hover:hover{
        display: block;
}

<div class="left_corpo">
        <div class="restaurantes">
          <img src="<?php echo $restaurantes; ?>" onclick="abrirlayer('layer_restaurantes')">
        </div>
        <div class="restaurantes_hover">
          <img src="<?php echo $restaurantes_hover; ?>" onclick="abrirlayer('layer_restaurantes')">
        </div>
</div>
Author: Renan Gomes, 2016-05-20
Source

4 answers

Do with the opacity property, and take advantage of the z-index, so no need to do anything in the image of .restaurantes_hover: 

.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;
}

Has here a jsfiddle suitable for your structure

 2
Author: Miguel, 2016-05-20 09:00:35

If it's like display:none it's like it doesn't exist, you can use 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>
 2
Author: Pedro Luzio, 2016-05-20 08:37:41

Uses the :hover non-parent element selector. This is because the DIV remains to check whether :hover exists or not... You cannot 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" />
  <img class="img-hover" src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
</div>

Pure HTML and CSS works on all browsers...

 1
Author: Th3Alchemist, 2016-05-20 08:44:53

Try This Way:

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;
}
 -2
Author: caocrodilo, 2016-05-20 20:34:04