CSS Mouse Over Opacity Effect

Posted onAuthormr-mojo-risinLeave a comment

Generally this is no rocket science, using the CSS3 attribute “opacity”, unfortunately CSS3 is not supported by many browsers. As an alternative one could use JavaScript, which also might not work everywhere (if disabled due to security measures). So the easy way only works in the latest versions of Firefox and Opera.

CSS CSS Mouse Over Opacity Effect

(Take a look at a live demo here)

In order to get this working in all the browsers (Ok, using IE6 we’ll have to trick a little bit, but we’ll discuss this later) we have to approach this in a sneaky way.
Here is a simple, fast, lean, cross browser functional and JavaScript free method, only using plain HTML, CSS and graphical elements:

First of all we need graphical elements, for this example only four are needed, five if including the IE6 hack:

  • 2 images of your choice to be linked
  • one graphic with transparency and color of your choice in the same size as the linked images
  • one 1px x 1px full transparent GIF

You might want to download the whole demo here, there the graphics are included.

First create the div containers including the picture links in the html document, assign a class called “image” and determine the background image, which shall be linked, by using the “style” attribute.

<div class="image" 
style="background-image: url(product_01.jpg);" > </div>

<div class="image" 
style="background-image: url(product_02.jpg);" > </div>

[Integrating the images via “style” might be avoided by assigning “id” and referencing the image url in the css, but I needed the image to referenced in the html code for dynamic site and did not want to use the “img” tag for reasons]

After that add the links, define them using “class=”picture”, linkpath and further attributes like “title”. it should look somewhat like this:

<div class="image" 
style="background-image: url(product_01.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
</div>

<div class="image" 
style="background-image: url(product_02.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
 </div>

Now the css, only two classes (+ one pseudo class) are needed:

.image:
It must at least contain “background-repeat: no-repeat; border: none;” or modifications if wanted.

a.picture
The size of the linked picture and the attribute “display:block;” must be indicated. The image-url for the non-active link is indicated as “background-image”, too

a.picture:hover
Here the image-url for the active link is defined.

Now the .css file should contain the following:

a.picture {
background: url(opacity_01.png) no-repeat; 
width:183px; 
height:146px; 
display:block;}

a.picture:hover {
background: url(blank_01.gif) repeat;}

.image{
background-repeat: no-repeat; 
border: none;}

Now you just need to align the two div containers properly as you like them to be.
In this example they are floating with a margin of 10 pixels, which is done by two additional classes “l” and “m”. Why it is separated from the “image” class is explained here.

Attention!

This works properly in every browser, but in not IE6, because here only full transparency is supported.
So here’s the IE6 hack:

First create a new .css file named “ie6.css”, then add the following lines between the <head> tags of your html file:

<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->

After that you refer to an image using only full transparency in the “a.picture” class in the “ie6.css” file, somewhat like that:

a.picture {background: url(opacity_ie6_01.gif) no-repeat;}

…and you are done!

Leave a Reply