Make Clickable Images In Blogger with Fade Effect

You will see that the image is no more clickable. and the code I used this time is the same one but without the href tag,

<img src="IMAGE LINK" width="240px" height="180px"  alt="unclickable Koala image" title="unclickable Koala image" border="0" />

 

 

How to make an image fade in and fade out?

For this you will need to add a tiny CSS3 code to your template. So kindly follow these steps,

1. Go To Blogger> Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Add the code below just above it

 

/*---MBT FADE OUT CODE ----*/

.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.3;
border:0;
}
.Fadeout:hover img {
filter:alpha(opacity=30);
opacity:1.0;
border:0;
}

/*---MBT FADE IN CODE ----*/

.Fadein img {
filter:alpha(opacity=30);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=100);
opacity:0.3;
border:0;
}

 

 

 

    5.  Save your template.

 

Now whenever you wish to add the fading effect to your image then simply insert an additional code to the same [a href="#clickable"]Clickable image code[/a] that we discussed above.

To make the image Fade out simply insert class="Fadeout" to your image code like this,

<a class="Fadeout" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example below. (Hover your mouse cursor on it)

 

To make the image Fade in simply insert class="Fadein" to your image code like this,

<a class="Fadein" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example,

 

 

I hope you find it useful. If you wanted to know where to save your images or to get IMAGE Links then read this post,

• [a title="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" href="http://www.mybloggertricks.com/2009/11/create-blogger-backup-for-images-and.html" target="_blank"]Learn how to save images and get image links[/a]

If you want to learn more image effect then I am sure you would love these tuts,

• [a href="http://www.mybloggertricks.com/2010/12/add-drop-shadows-to-images-and-expand.html" target="_blank"]Add Drop shadows to images[/a]
• [a href="http://www.mybloggertricks.com/2010/02/top-10-widely-used-image-hover-effects.html" target="_blank"]Top 10 Widely Used Image Hover Effects![/a]

Source: http://www.mybloggertricks.com/2011/06/make-clickable-images-in-blogger-with.html