CSS Hover Effect

Question

I need to show an additional image once the user hovers over button. How would you go around doing this ideally just using CSS.

You can see what I need exactly on the image below, when the users hovers on the brochure button, the view brochure button appears.

enter image description here

The short answer .button:hover .view-brochure {display:block} We really need html — JohnP
– JohnP, Commented Apr 20, 2011 at 11:31

Billy Moon · Accepted Answer · 2011-04-20 11:35:55Z

5

with css alone, if you can put an element inside the hovered object, you can do like this:

html:

<div id="one">all the time
    <div id="two">only on hovering one</div>
</div>

css:

#two{
  display: none;  
}
#one:hover #two{
  display: block;
}

answered Apr 20, 2011 at 11:35

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thanks for your easy to use, and well explained answer :) Appreciate

Jim Blackler · Accepted Answer · 2011-04-20 11:32:15Z

0

In CSS

button:hover {
    background-image: url(someImage.png);
}

answered Apr 20, 2011 at 11:32

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

I don't remember very well, but I think this does not (always) work in internet explorer. So you should test it well!

Apart from that, the other answer is better, especially to position, and play around.