How do I make another image appear on hover

Question

This may be a simple question but I can't seem to get my head around to getting it working. here is the basic set up (I missed out all the positioning etc as it isn't relevant):

<div id="wrapper">
<img class="album-pic-exit" src="images/exit.jpeg"> 
<img class="album-pic" src="images/blank.gif">
</div>

#wrapper.album-pic-exit { display:none; } 
#wrapper.album-pic:hover +.album-pic-exit { display:block }

Basically when the cursor hovers over "album-pic" the "album-pic-exit" appears. I managed to make this work by having the "..exit" be a non-repeat background on hover but, I think thats unclean and surely there must be an easier more straight forward solution. I am relatively new to this but i believe I work better by looking and experimenting myself rather than resorting to google so my bad if the syntax is all wrong. p.s I would preferably want a walkthrough solution of css rather than javascript or jquery.

score 1 · Accepted Answer · answered Aug 29 '12 at 18:49

1

You can do it this way; however, you will have to switch the order of the two images, like this:

<div id="wrapper">
  <img class="album-pic" src="images/blank.gif">
  <img class="album-pic-exit" src="images/exit.jpeg">
</div>

Then use this CSS:

.album-pic-exit {
  display: none;
}
.album-pic:hover + .album-pic-exit {
  display: inline;
}

First, we hide the exit image with display: none. Then, we use the adjacent sibling selector + to select the exit image when the other image is being hovered over.

answered Aug 29 '12 at 18:49

Abraham

20,316
7
33
39

Yup, that worked cheers. Didn't even know the order had that much affect when using css. – Roy Aug 29 '12 at 19:01
The `+` selector selects the _next_ siblings, not the previous. In your code `.album-pic:hover + .album-pic-exit`, you were saying "When the `.album-pic` is being hovered over, take all the `.album-pic-exit`s **AFTER** the `.album-pic` and show them. So you have to put the `exit` image after the other one. There's no previous siblings selector in CSS. – Abraham Aug 29 '12 at 19:39

score 1 · Answer 2 · edited Dec 24 '22 at 22:35

many possibilities :) First, there are no backwards selectors in CSS, so for your CSS you would need the following HTML:

    <div id="wrapper">
    <img class="album-pic" src="images/blank.gif">
    <img class="album-pic-exit" src="images/exit.jpeg"> 
    </div>

Anyway, this would be better:

<div id="wrapper"></div>

    #wrapper {
              width:ALBUM_PIC_WIDTH;
              height:ALBUM_PIC_HEIGHT;
              background:url(ALBUM_PIC_URL) 0 0 no-repeat;
}

#wrapper:hover {
              background:url(ALBUM_PIC_EXIT) 0 0 no-repeat;
}

(Fill in the URLs for the capital stuff, of course.) You could also google for "javascript rollover tutorial", if you need to have the two images as for coding issues.

score 0 · Answer 3 · edited Oct 05 '16 at 22:47

Amazing Hover Effects with CSS3 is a good tutorial:.
CSS:


div.shadow {
    width: 300px;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    }
div.shadow:hover {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

HTML:


<div class="shadow">
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.
</div>

How do I make another image appear on hover

3 Answers3

Linked