Add jQuery Image Hover Fade Effect to Blog/Website

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below


STEP #7:  Just above that paste the following code.
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>  
 <script type='text/javascript'>  
 $(document).ready(function(){  
 $(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads  
 $(".post img").hover(function(){  
 $(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover  
 },function(){  
 $(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout  
 });  
 });  
 </script>  
 <script type='text/javascript'>  
 $(document).ready(function(){  
 $(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads  
 $(".latest_img").hover(function(){  
 $(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover  
 },function(){  
 $(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout  
 });  
 });  
 </script>  

STEP #8: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.

Share this

Related Posts

Previous
Next Post »