Elegant subscription Widget for Blogger

Hi! While surfing the web I found this subscription widget that looks very stylish for our blog.
I will explain how to add this subscription box for blogger with social icons.hope.
Using this, users can subscribe to your blog. So, help you get the new updates by email. This Widget CSS.

Let's put on our blog .........

1. As usual we will Design >> Add a Gadget >> HTML / JavaScript.
Then add this code:

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMmyTDgtOdL8IgOorVRKUMpnod-72KBvlso9tZ50-7hyphenhyphenQWZFhm_wY_al0TRnHiWG5dz2_ZVDNkY8YuMgNEMzkayJytj11ElvUG-inGHfXNUx-0pqkjMEFqBi0RCdPzSR2-i7ENheGo4J0/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqhzMuzuSmy9L6qiCj0vZR2ud3ffZleTCUUyf2IJegjQ1sl5Qov1FHFIsTXw_zxLnjTyvCJqSmXN7uZTn189PuMtBhk1istSRxbwf886sgQh9qTjVs3rKFWTRaDAJw1M80EPkeCBVRoO4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/my_page"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZfnYo1VFGaCykq185tgoKm-gjIxjBQGml9VjFLwkj5PiVWfaGUh-2Snxq4b70tWuz_RIOTukHhuyKEG5ubctMqsNiXCVVomJ-a2kkM19Xdqa6r-NJRA-NLeDvRWa2jjS3d1J_kaKG5m1/s1600/Bloggertrix-facebook.png" /></a><a class="social-icons" href="https://twitter.com/my_user"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK92_sL91bURJks3y2YAPoxzv4clutke3TKzQutMSj7cO5nuC5GhniYFmSHnza5d6xXm_IhY2rzSlAwKpSmNs6lkf5mAwaCH2sK0QkYgu2t_SUxi4ZP1_RBAhardvdWM6A6xNfZ3pAPQKV/s1600/bloggertrix-twitter.png" /></a><a class="social-icons" href="https://plus.google.com/mi_User"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrF3jp91jXnrOdRbIuMuJ0Pi8FqUCaBsnp4H44e4LLhSHlh6sG9CfBYj03V5vZAaBqDw_do6k9K4qUbQBEGLemJOr_v8jCxaWCQ1x205aYDK8dX9su2p0PdkT7WHt8oCRglL34aIdZaF_q/s1600/Bloggertrix-Googleplus.png" /></a><a class="social-icons" href="http://www.feedburner.com/my_feed_id"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipVIscG5-vJg8jj00vvNHc2H7W-kefZTCGuNJ8_qJo3X14UzRirfPb9AYF2LSAobql3U-uu62yf8lY31_9UBLBLRDpWHqtUGwZeVE9C9MUF0wI_jX5ZpVfTMDXCQxOq0KAa7BMtNmtmfep/s1600/Bloggertrix-Rss.png" /></a><p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=id_Feed" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=your_id_Feedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

Two. Replaces everything was blue and ready for your data.

- You can change where it says: Enter your email address here for what you want.

The Trick Of Snowflakes falling on the blog

Many bloggers want to get their blogs according to the style of the time, so that is why today I wanted to share a trick with the snow fall will you do on your blog.

This trick is very light so do not overburden your blog, the trick you can see it running in the next blog.

To add this trick to your blog, so you just paste into a HTML Element / JavaScript the following code:
<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="&bull;";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>

Now just have to save the changes and you will finish this. The trick will look much better in a dark blog

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.