Confusion with the hover method

[mcranston18]

Hi there. I’m hoping for a bit of help using the “hover” method in CSS.

My HTML is as follows:

​

What I would like to do is on hover, overlay that image with a new image. Let’s say (hypothetically) with this image: http://teamcoding.ca/leisure/wp-content/uploads/2012/05/ViewEventImage1.jpeg .

I’m not sure how to do this though.

Is it better practice for to have a

in my HTML, then in my CSS add a background-image, and then add another line for div to hover? i.e. :

HTML:

CSS:

#thisismyImage {

background-image:currentimage.jpg;

}

#thisismyImage:hover {

background-image:newImage.jpg;

}

[Taufik Nurrohman]

Try this: http://jsfiddle.net/tovic/NTXmL/16/

.image img + img {display:none;}

.image:hover img + img {display:block;}

[Author]

Posts