CSS2 Compliant Image Fade [How-to]

Hey guys, welcome to another coding tutorial. Today I’m teaching you all how to make an image link fade effect with CSS2 compliant code.

Here is an example of what you can create using this tutorial: Clicky.

Ok, so you’re probably wondering what I mean when I say “CSS2 Compliant”, well that basically means it works on all fairly modern web browsers, like Internet Explorer for example (the hardest browser to code for). The reason it’s good to have it in CSS2 is because CSS3 is not implemented in all browsers, so it makes web design difficult.

Now, lets stop the chit-chat and get into the tutorial, shall we?

The CSS

Below is the CSS code that you need to make this work. These handle all images inserted via the “img src” method, basically it tells the images how to behave.

Static Img

What this code is telling the image to do is to fade itself 50 percent of it’s original color by default. I have also left a few CSS comments in there to help you understand it a bit.


img {
border: none; /*Stops the ugly borders*/
-moz-opacity: 0.5; /*Mozila Firefox*/
-webkit-opacity: 0.5; /*Webkit Standards - For I.E*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*Microsoft Standards*/
filter: alpha(opacity=50); /*Modern Browsers Use This*/
opacity: 0.5; /*One More For Good Measurement*/
}

Img Link

This part of the code is to tell an image that has a link attached; what to do. We make the options the same as above because we want it to have a fade before we hover it.


a:link img {
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}

Img Hover

This part handles what happens when a user hovers over your linked image. It is telling it to return back to the images original form (no fade), this makes the image appear to light up when they put their mouse over it, it gives a dynamic look and lets the user know that the image actually does something.


a:hover img {
-moz-opacity: 1.0;
-webkit-opacity: 1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
}

The HTML

Ok, now that you have your CSS code in there (whether it be via a style sheet or embedded in your HTML page with style tags), you want to know how to use it right? That’s where the HTML comes in.

The Image

First, you will need to have an image/images that you want to use, so go ahead and find/make one, save it, and remember it’s location. Once you have the image and the location, you can move on to the code.

Img Src

Below is the code you will need to use for each image that you want to have it working on. I have entered dummy details in there to help you, so just change it to details relevant to you.

your picture

Test

So, that should all be working now, but in-case it’s not, try looking at my code again and retrying it, it could be as simple as you accidentally deleted a semi-colon somewhere. If it doesn’t work again, post a comment to this article and tell me about it, I’ll do my best to help you.

Other Means?

If you need another means of achieving the same effect without using CSS, I have a code that does this exact same thing, but instead it uses JavaScript. If you would like to have it, either comment and ask for it and I’ll send it to you in an email (be sure to use your real email address), or you can use the contact page doing the exact same thing.

Conclusion

Thank you for taking the time to read my article, I really appreciate it. I hope you all found this tutorial helpful and a worth-while read! I hope you’ll come back soon and check out our new stuff in the future. If you liked it, be sure to comment, every comment inspires me to do more tutorials!

1 Comment