Animated Circle Gallery with Pan Style For Blogger

In this post i will explain, how to add circle image gallery with pan style.This will give a nice look to your blog.Im using css3 for this gallery.It include nice hover style. you can try to add it to your blog. Earlier image effect post are
here. Check demo below.

Demo

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3.Find this code  by using Ctrl+F  ]]></b:skin>

4.  Paste below code Before ]]></b:skin> code

/*GALLERY-Bloggertrix.com*/
.gallery {
    width: 800px;
    margin: 50px auto;}
ul {
    list-style: none;}
.gallery li {
    height: 100px;
    width: 100px;
    margin: 15px;
    float: left;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;}
.gallery li img {
    margin: -100px 0px 0px 0px;
    z-index: -1;
    -webkit-transition: margin 1.5s ease;
    -moz-transition: margin 1.5s ease;
    -o-transition: margin 1.5s ease;
    -ms-transition: margin 1.5s ease;
    transition: margin 1.5s ease;
}
.gallery li:hover img {
    margin-left: -150px;
    margin-top: -150px;
    cursor: pointer;
}
.gallery li p {
    width: 100px;
    padding: 20px;
    position: relative;
    left: 15%;
    top: 110%;
    z-index: 1;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font: bold 18px/1 Helvetica, Verdana, sans-serif;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    transition: top 0.5s ease;
}
.gallery li:hover p {
    top: 75%;
    margin:-55px 0 0 -35px;}

5. Go to blogger  Design > Page Element.

6. Click Add Gadget and select 'HTML/Javascript

7.Paste below code.

<div class="gallery">
        <ul>
            <li><p>Swing</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazLzYfxbeFlsdJfXIwqqlFGKoZ42FlCU_mIUgQihITC2qdnV2ZnDERCnshNI__eC7gP9J3_rGrfgw3sALmQ3IIrh5b_AusvkzQByWeAMqefMdiGPEBTY3xogilPc6cM10BA1LyMkaBxM/s1600/bloggertrix-image1.jpg" /></li>
            <li><p>Surf</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4f_7xIxcKswFuVEeR21w0K00d9VrwIBFJwqNaPiEUZFILyQ5EFOkQCgg1x9frjUEA5BMi-iaICYE2x3GMVaV8qlJsQXqfvjvmAt91aRiilyRr7hmFctzD-ird796K7EgCn3ksHevG3zw/s1600/bloggertrix-image2.jpg" /></li>
            <li><p>Pedal</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZQko2Jn-LnWtnekY5Jr_vBMT-Gzayr_mcR83NJUZ5irhc1ZapKZlwEPhKpsazuyfygEaYIPvP3ere3Kt_7hfAChRVOzCZmz4CaXhGF2DWID_c3aA5S7EoT-8noFPPhcH_6L2C-8U7JAA/s1600/bloggertrix-image3.jpg" /></li>
            <li><p>Thrash</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPlOwTxHF1sYTmDgrX7KlZcKq7jXW8gnalW1y_vV8qvG8V-KKSFCGgW1uhZ5RUpoTsg94Ggar3bpk1vjWuziKD7pj6gYW0iMy0aT2N_QgJutjUw1DJBHE_xEIs1BPRJ3x9IQCEvgCSMoI/s1600/bloggertrix-image4.jpg" /></li>
            <li><p>Ride</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHhX0RlDzQ30m4wZ8N7Cv7Wf_73JjOyAmk5rOR9lhv63qKGVw0TncmDgu9MYNuC59vpV5zyJ0XVbGenGGPzujcot9sXQa2N9EqltaCwXe69iVQoV9dvO0-wzkpdnhd11KnGfMlFYjAbhY/s1600/bloggertrix-image5.jpg" /></li>
            <li><p>Kick</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcMx4xYJtMLAZMJylT4NwnEyboidl40Je9dfJCP2RvuGepCiN05MNMlhSSE3QWcg0XWk_KHZiewVMMRlLhXgOvFpy8bjdQPkc17faKUQag-oOPpF8SQVC4jh7S4p91kpQ3gXQJgfxn3BA/s1600/bloggertrix-image6.jpg" /></li>
            <li><p>Dive</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipCs2Bz5SsBOSgUIraHtpMmdRJefQOlcyEng-YUnIkv1EgKSjwzTJmx1qHIS39QYslZDcS9s8ktHi_xKcpBbHDZNHLNfU3D2VBOwYOQRCTgrsAyZlYRlujxtUxw2rtcd-WrmBc2c5Oy0/s1600/bloggertrix-image7.jpg" /></li>
        </ul>
</div>

8. Now save your template. You are done.