Question

I’m confused about proper practice when using the :hover method in CSS. In this example, I have a photo that upon hover, changes to a different photo. As I understand, there are two options though I’m unclear how to accomplish either, and which one is optimum.

Option 1:

I have two images in my HTML. In this example, should I be positioning them in the exact same spot and then hiding one on hover?

http://jsfiddle.net/C5bKZ/4/

Option 2:

I create a single empty div in my HTML, and the use CSS to add a background-image, and then have a new background-image float over on hover.

http://jsfiddle.net/C5bKZ/9/

Answer 1

There are numerous ways you can accomplish this:

1. Sliding background: You could have a single image (with two images side by side) as the background and simply re-position it when the parent element is hovered.

2. Position the two images absolutely, one on top of the other, and hide the top one when you mouse over, thus revealing the second.

3. Place both images side-by-side in the parent, setting overflow to hitten (to hide the second image). When the user mouses over the parent, hide the first, which moves the second into view.

With the first example you posted, you could add the following CSS:

.image {
    width:    180px;
    height:   270px;
    overflow: hidden;
}

.image:hover :first-child {
    display:  none;
}

Fiddle: http://jsfiddle.net/jonathansampson/C5bKZ/10/