Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

css - image hovering

Posted on 2011-02-22
4
329 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

828 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