CODEWITHSUNDEEP
csshover
Roy
Roy

Reputation: 3267

How do I make another image appear on hover

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.

Upvotes: 0

Views: 11812

Answers (3)

simonthesorcerer
simonthesorcerer

Reputation: 559

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.

Upvotes: 1

Cam
Cam

Reputation: 378

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>

Upvotes: 0

Abraham
Abraham

Reputation: 20684

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.

Upvotes: 1

Related Questions