Change image with CSS Hover

Question

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 becomes block, but it is not working. Any idea?

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

Answer 1

If you’re like display:none it’s like it doesn’t exist, you can do it with 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>

Answer 2

Do with the opacity property, and take advantage of the z-index, so do not 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;
}

You got a jsfiddle appropriate to its structure

Answer 3

Utilizes the :hover Parent element selector. This is because the DIV remains to check if it exists :hover or not... You cannot apply a :hover image directly if this 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...

Answer 4

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