Hover Effects to Your Blogger Blog Images

Add  different effects to those photos.The COOL thing about this is you just have to add some jQuery and Css to your template then you can easily add from Five hover effects to add some live to your blog photos.

Lets look through the effects and you can also check out this sample in action here.

The 5 effects will be :

Effect 1 - Popout, this is a basic pop out effect on hover the photos will pop out from the page.
Effect 2 - SliceDown, The image will have an dark overlay and on hover a slice effect reveals the image clearly.
Effect 3 - BoxRandom, The image has a light overlay and on hover the image is revealed by boxes randomly clearing.
Effect 4 - FoldLeft, Once again the image has a light overlay and this time on hover an accordion fold effect reveals the image.
Effect 5 - RainGrowReverse, This time on hover the image is revealed from corner to corner.


Add The PICS Effects To YOUR Blogger

Note:Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your (New Design) Blogger Dashboard- Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html >

Step 2. Find this piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

    </head>


Step 3. Copy and Paste the following code Directly Above / Before </head>
---------------------------------------------------------------------------------------------------------------------
    <script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    /*<![CDATA[*/
    jQuery(function($pice){
    $pice('.effect1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
    });
    $pice('.effect2').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'sliceDown'
    });
    $pice('.effect3').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRandom'
    });
    $pice('.effect4').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'foldLeft'
    });
    $pice('.effect5').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRainGrowReverse'
    });

    });
    /*]]>*/

    </script>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

    ]]></b:skin>


Step 5. Now Copy And Paste This Code Directly Above / Before ]]></b:skin>

    .adipoli-wrapper{position:relative;display:inline-block;margin:auto}
    .adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
    .adipoli-box{display:block;position:absolute;z-index:0}
    .post img{border:0!important;margin:0!important;padding:0!important}
    .adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}


Step 6. Save your template.

How to Add The Effect To Your Pics

Now we need to add a class tag to pics we want the effect on.So as you seen them on the demo ; if you want to use Effect 1 you add class="effect1" for Effect 2 you add class="effect2" and so on.Below I show were to add this class tag on your pics.

Then if your upload the pics or images directly onto Blogger we have an easy way to add the class.The code below is how the html for an image looks when uploaded to Blogger.

Important - This is when you upload the image in compose mode then switch to html mode.

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a></div>


You can see highlighted div class="separator" we change this to div class="effect1" (or effect2 etc..) like this below :

    <div class="effect1" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a></div>


When you add pics or images in html mode or adding externally hosted images your image code will be like this :

    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a>


We add the class as shown below :

    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTspqHJ7VFYX65NEe_ZksRAZ5AaXH-DFXtijn8jEYjisgyQON8ref5VlcY-yFzol_nfQzanSKSPrV3iQS0pBptd6D0IyorWh36L8sVE5K_FOFR44ZWTr49d1YG_afsbG1vHSrf5vG2YxAb/s1600/image-effects-image-2.png" /></a>


For this we used the idea from the Adipoli jQuery Image Hover Plugin.

The Trick to Change Image On Blogger

How to make an image clickable?

The complete clickable image code looks like this,

<a href="LANDING URL" target="_blank">Image LINK" width="" height=""  alt=""  title="" border="0" /></a>

• Where refers to where will the image take the user when it is clicked.
• Where IMAGE LINK refers to the URL of your picture
• width="" and height="" has to be given proper values in pixels
• alt="" is alternative text tag that you right to tell search engine robots what the image is about
• title="" is the name of the image that appears on mouse hover. It is always kept the same as the alt=""
• border="0" ensures that no border or outline appears across the image

For example for the image below I have used the following code,

<a href="http://tricksblogspot.blogspot.com/" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>

When you click the image, it will take you to our homepage. Else if you want to link to the original size of image then use this code,

<a href="IMAGE LINK" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>

Clicking the image below will show you its original size.

How to make the same image un-clickable?

To make any image un-clickable simply remove the href linking tag. After removing the landing address tag we get,

<img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" />

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 Horse image" title="unclickable Horse 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 Clickable image code 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,