jQuery 5 In One Image Effects For Your Photos On Blogger

Bloggers are always using images and photos on their blogs so in this post we will see how you can add five different effects to those images.The neat thing about this is you just have to add some jQuery and Css to your template (We make it easy) then you can easily add from 5 hover effects to add some spice to your blog images.

Lets look through the effects and you can also check out the demo to see it in action.

The five effects will be :

Effect 1 - Popout, this is a basic pop out effect on hover the image 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 Image Effects To Blogger

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

Step 2. 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)

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

Adding The Effect To Your Images

Now we need to add a class tag to images we want the effect on.So as you seen them on the demo page; 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 images.

OK if your uploading your 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/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/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/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/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 below :

<div class="effect1" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/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/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a></div>

If you are adding 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/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a>

We add the class as shown below :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVwdxSQ99bC8oxtZ_qwOCT5SKJyoB1r7rc-rbhXpbDd5byicabTpfk82-oUrTuOQqbvjJekuPgPEUeUuzOcHRZURcTWg56FBsKCDBuPfiO3YEtU1JgUJ0l8ZzKAZYT7Mifeg7G1Y-9Kze/s1600/image-effects-image-2.png" /></a>

For this we used the idea from the Adipoli jQuery Image Hover Plugin, make sure to check out more of our Blogger Tutorials.