CSS Mouse Over Opacity Effect

mr-mojo-risin — Tue, 04 Nov 2008 16:15:23 +0000

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.

(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.

[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:

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 tags of your html file:

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!

CSS – some basic hints

mr-mojo-risin — Sun, 13 Jul 2008 13:20:30 +0000

CSS (cascading style sheets) is the ultimate tool to create lean, fast, functional, SEO friendly and, though, sexy layouts. Storing style attributes in one file provides several advantages as faster loading times, the source code takes a radical diet, if all the attributes do not appear on the pages itself.

You are web designer and have to work full contact with the customer? Then you will know this situation, the customer wants that headline bold and purple – no, make it green or is blue a better choice? This goes back and forth, which would make you go crazy if you had to do the changes on thousands of subpages. Using CSS you do changes faster than the customer decides between green and yellow.

Ok, enough chit chat here are some tricks to get more effective:

Assign multiple classes on one element
This is a real saver, one simply creates a “virtual” class by combing several ones, which is highly flexible and lowers the amount classes you will have to use.

Example:

The text should be black, underlined and bold, now instead of using a single one containing all three attributes, you setup three with each single value (black, underlined, bold)
```
the text
```
On the first hand this looks intricate, one could do this with a single class, but remember if you combine the three classes, you’ll get six “virtual” ones.
Using multiple stylesheets
Splitting up the a single stylesheet first of all makes it easier to maintain for the web programmer.
It’ also possible to embed further .css files into a specific .css file by integrating “@import url(“additional.css”); right at the top of the .css document.
Abbreviations

As there are always many roads to reach your destination, CSS is no exception. One can shorten the CSS code to increase the clearness of the structure.
Example:
Instead of:
```
.classname{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
```
the abbreviated version should be used:

.classname{margin-top: 10px 15px 20px 25px;}

The order of the values is important, they are arranged clock wise:
top (12 o’clock), right (3 o’clock), bottom (6 o’clock), left (9 o’clock),
That also works with the attributes padding and border.

Compressing attribute values

Several attributes can be concentrated in a single one.

Example:
Instead of:
```
.classname{
border-width: 10px;
border-style: solid;
border-color: #000;
}
```
Use:
```
.classname{border: 10px solid #000;}
```
This also works on “font” and “background”, i.e. .

Webdesign, CSS, Social Media, Tech & Geek Stuff » code

CSS Mouse Over Opacity Effect

CSS – some basic hints