[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 355
  • Last Modified:

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
}
0
rossoneris
Asked:
rossoneris
  • 2
1 Solution
 
SSupremeCommented:
yes, it is possible.
0
 
rossonerisAuthor Commented:
Do you have an small example ? -

0
 
thecrewCommented:
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now