Image Thumbnails With Hover Effect and Sliding Caption for Blogger

image-thumbnails-with-css-hover-sliding-caption

Image Thumbnails With CSS Hover Effect and Sliding Caption for Blogger

This tutorial will guide you through some simple steps which will add image thumbnails linked to any post or page on your Blogger powered blog. The image thumbnails reflect a beautiful hover effect with zoom and sliding caption. You can place this widget on your blog's sidebar or anywhere else. Before adding this beautiful widget to your Blogger blog, you will surely wish to see it in action. You can view demo here.

In demo page, I have stacked the images in a single column, but the code you can customize and set the width the way you like. You can see this widget in 300px width on sidebar of above demo page. I'm going to provide you the CSS and HTML code for 300px width which is the most common with for sidebar of Blogger blogs. If you need it in any other resolution and can't modify the CSS code, you can comment below and tell us what should be the resolution of this widget for your blog. We will customize and provide the code for you. Now lets discuss the procedure for adding this beautiful widget to your Blogger blog.

How to Add This Widget to Your Blogger Blog

1. First of all, login to your Blogger dashboard, select your blog and go to its template section
2. Download a backup of your template and then edit its HTML (Learn how to edit Blogger template)
3. In editor, press Ctrl+F and find ]]></b:skin>. Then paste below code just above it
.thumbnailWrapper { width:300px; margin:0px auto; } /* not important */
.thumbnailWrapper ul {
list-style-type: none; /* remove the default style for list items (the circles) */
margin:0px; /* remove default margin */
padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
float:left; /* important: left float */
position:relative; /* so we can use top and left positioning */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
width:140px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
}
.caption{
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
display:none; /* hide by default */
/* styling bellow */
background:rgba(0,0,0,0.8);
color:white;
}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:100%;
}
.clear { clear:both; } /* to clear the float after the last item */

4. After adding the code, save your template and close editor
5. Now go to Layout section of your blog and add a new gadget in the concerned location. The recommended place for this widget is your blog's sidebar, but you can add this anywhere you want. Select HTML/Java Script for your gadget and paste below code in the box
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript" charset="utf-8">
    $(window).load(function(){
    //set and get some variables
    var thumbnail = {
    imgIncrease : 100, /* the image increase in pixels (for zoom) */
    effectDuration : 400, /* the duration of the effect (zoom and caption) */
    /*
    get the width and height of the images. Going to use those
    for 2 things:
    make the list items same size
    get the images back to normal after the zoom
    */
    imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
    imgHeight : $('.thumbnailWrapper ul li').find('img').height()
    };
    //make the list items same size as the images
    $('.thumbnailWrapper ul li').css({
    'width' : thumbnail.imgWidth,
    'height' : thumbnail.imgHeight
    });
    //when mouse over the list item...
    $('.thumbnailWrapper ul li').hover(function(){
    $(this).find('img').stop().animate({
    /* increase the image width for the zoom effect*/
    width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
    /* we need to change the left and top position in order to
    have the zoom effect, so we are moving them to a negative
    position of the half of the imgIncrease */
    left: thumbnail.imgIncrease/2*(-1),
    top: thumbnail.imgIncrease/2*(-1)
    },{
    "duration": thumbnail.effectDuration,
    "queue": false
    });
    //show the caption using slideDown event
    $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
    //when mouse leave...
    }, function(){
    //find the image and animate it...
    $(this).find('img').animate({
    /* get it back to original size (zoom out) */
    width: thumbnail.imgWidth,
    /* get left and top positions back to normal */
    left: 0,
    top: 0
    }, thumbnail.effectDuration);
    //hide the caption using slideUp event
    $(this).find('.caption').slideUp(thumbnail.effectDuration);
    });
    });
    </script>
    <!-- start thumbnailWrapper -->
    <div class='thumbnailWrapper'>
    <ul>
    <li><a href='#'><img src='https://lh6.googleusercontent.com/-71UJFEszojI/URThG0L2eZI/AAAAAAAADCw/jwWlovyByh0/h120/bird.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CaptionText</p>
    </div></li>
    <li><a href='#'><img src='https://lh5.googleusercontent.com/-7ZH3eoHNlhk/URThHyZdiHI/AAAAAAAADC4/eSqP7Fkh8Bk/h120/fish.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CaptionText</p>
    </div></li>
    <li><a href='#'><img src='https://lh3.googleusercontent.com/-SjQapjtkN5A/URThIVVxsKI/AAAAAAAADDA/-4RyO-Pz1ho/h120/blogger.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CaptionText</p>
    </div></li>
    <li><a href='#'><img src='https://lh4.googleusercontent.com/-5ZoMY_1K86c/URThJHCTORI/AAAAAAAADDI/v7J3lN04MBI/h120/wordpress.jpg' /></a>
    <div class='caption'>
    <p class='captionInside'>CaptionText</p>
    </div></li>
     <div class='clear'></div><!-- clear the float -->
    </ul>
    </div><!-- end spolightWrapper -->
6. Now replace with your post/page or external link, blue highlighted link with link of your image and bold CaptionText with the text which you want to set as caption for the image. Caption text will slide out when your visitors will hover their mouse pointer over the image. After modifying the values, save your gadget. You are all done!!

Need any help regarding adding this widget to your blog? Comment below with your issue. We will assist you. Don't forget to leave your response either you liked this widget or not. Thank you!

Labels: ,