Solved

css - image hovering

Posted on 2011-02-22
4
302 Views
Last Modified: 2012-05-11
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
Comment
Question by:rossoneris
  • 2
4 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34951623
yes, it is possible.
0
 

Author Comment

by:rossoneris
ID: 34951808
Do you have an small example ? -

0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34951945
0
 
LVL 3

Accepted Solution

by:
thecrew earned 125 total points
ID: 34962296
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now