css - image hovering

I would like to know if it is possible in css to define a:hover, where an image appear.

For example an nearly transparent white layer that appears on top, when moving the mouse over a field.

Fx.
a:hover {
background-image etc etc
}
rossonerisAsked:
Who is Participating?
 
thecrewConnect With a Mentor Commented:
An easy way is to make a background image that is twice as high as the element you are dealing with, the top half of the image would be what the user would see when they are not hovering over the element, then the bottom half would be what they should see when they are hovering over. Then all you do is apply the image as a background to your element and move it by the height of the element when the item is hovered.

For this example the element is 42px tall, but the background image would be 84px tall.
CSS:
<style type="text/css">

#itemID {
	display:block; /* if it's not already a block level element */
	width:150px;
	height:42px;
	background:url("images/translucent_image.png") no-repeat scroll 0 0 transparent;
}

#itemID:hover {
	background-position:0 -42px;
}

</style>

Open in new window


HTML:
<a href="#" id="itemID"></a>

Open in new window


Good luck!
0
 
SSupremeCommented:
yes, it is possible.
0
 
rossonerisAuthor Commented:
Do you have an small example ? -

0
All Courses

From novice to tech pro — start learning today.