CSS: Image Hover Information
Introduction
Author: Martin WarningYear: 2007
License: Free
This code shows examples of using the mouse over an image to show some details about that image. Normally this is done in JavaScript, but it can be done in CSS as well. The main problem with JavaScript is writing a solution that works in all browsers. CSS of course has similar problems where not all browser and browser versions support the full CSS implementation. The examples here have only been tested in the latest (as of writing) browsers from Microsoft and Mozilla.
The key to this is the CSS property event. You can use the hover to create different formats for the hover event for links, but hover also works on other XHTML elements. In this case will be using it on a <div>. The second part is using a <div> hover event to change containing elements.
Code
Languages:- XHTML
- CSS
<div class="hiderdiv"> <a href="http://www.google.com" target="_blank" class="imgvinc"> <img src="google.gif" alt="Search with Google" width="276" height="110" /> </a> <div class="hidediv"> <b>Site:</b> Google Inc.<br /> <b>Link:</b> <a href="http://www.google.com" target="_blank">http://www.google.com</a> </div> </div>And the CSS part:
img{border:none;}
.hiderdiv{border-width:2px;border-style:solid;border-color:#fff;float:left;margin-left:5px;margin-right:5px;}
.hidediv{visibility:hidden;padding:5px;}
.hiderdiv:hover{border-color:#ff0;}
.hiderdiv:hover .hidediv{visibility:visible;}
The border color in the hiderdiv class is set the page background color, so it will seem that no border exists. You need to declare a border to prevent the page elements moving when the mouse over border is shown. The example also reserves a space for the information that will be shown when the mouse is moved over the image, again to prevent the page elements from moving on the mouse over event. The code .hiderdiv:hover .hidediv{visibility:visible;} will show the <div> hidediv when the user moves the mouse over the <div> hiderdiv. This prevents the hidediv <div> from hiding when the user moves over it, this would be the case if you use the image to generate the mouse over event.
The following example will add transparency (opacity) to the image:
img{border:none;opacity:.50;filter:alpha(opacity=50);}
.hiderdiv{border-width:2px;border-style:solid;border-color:#fff;float:left;margin-left:5px;margin-right:5px;}
.hidediv{visibility:hidden;padding:5px;}
.hiderdiv:hover{border-color:#ff0;}
.hiderdiv:hover .hidediv{visibility:visible;}
.hiderdiv:hover .imgvinc{background-color:#ff0;}
.hiderdiv:hover img{opacity:.9;filter:alpha(opacity=90);}
To set opacity you will actually need two attributes in CSS as Firefox and Internet Explorer don't understand the same CSS attribute. So we use opacity:.50; for Firefox and filter:alpha(opacity=50); for Internet Explorer. We initialize the image with 50% opacity and will change the opacity to 90% when the users moves the mouse over the image. We also show a background color when the user moves the mouse over the image. The background color works well in Internet Explore, but Firefox only displays the bottom part. Again we use the mouse over the hiderdiv <div> to trigger these events.
