Wednesday, 10 April 2013

How to - Make an image fade when you hover over it. (Image Fade Hover Effect).




Design Du Jour

This code contains a little CSS and some Java/HTML, but all in all very versatile and easy to use. I have applied it to the image above as an example.

The CSS code:

.Fade:hover img { 
filter:alpha(opacity=100); 
opacity:0.5


At the moment the RED part of the code is set to 0.5, meaning the image will fade by 50%. You can change the figure to lower or higher depending on your desired fade effect (for more fade, e.g. 0.1, 0.2, 0.3, 0.4. Or less fade e.g. 0.6, 0.7, 0.8, 0.9). Mostly though 0.5 is a great base.

This code needs to be added to your blog first by going to:

Template → Customise → Advanced → Add CSS

And pasting the code in the field provided. Then click the "Apply to Blog" button.




The HTML Code:

<center><a class="Fade" href="URL OF WEBSITE YOU WANT THE LINK TO GO TO" title="TITLE YOU WANT TO APPEAR WHEN THE CURSOR GOES OVER THE IMAGE" target="_blank"><img src="IMAGE URL" alt="IMAGE TITLE" style="border: solid 2px #FFFFFF" width="300"/></a><center>

Please see my post HERE on using a code to add an image to your blog, it is the same code but with class="Fade" added (to make the effect work). The post also tells you how to add this code to your blog.

That's it! Once you have both codes added to your site your hover effect will work!

See, easy wasn't it!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me