In this post, im going to explain how to add
amazing circle image hover effect with CSS.
Im using CSS and HTML for this. Atctually
this is very   interesting,  It   make your blog
attractive, You can link it with special post.
I include demo For this. you can check it from
below link. Check my earlier post here


Demo

1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.


3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

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

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

/* Bloggertrix  */
.ch-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;}
.ch-info{
    position: absolute;
    width: 150px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
.ch-img-1 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1H8gvW4Zt4tbDbbfjZxUtlh2AFIHObFm4pCg2dJ-kUGyfGYhYUGCi3j4Mq_YlmCtm9MMzzwZGrNTfYkpI5h6ZAjeuwUpn5Ww7uuc6vNODUOZI_dXKXSltlRecKDN6Ed6vnmOjgg26KLI/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8ByAzkx4hDLzgu0Hr6tKyoMhw58L1YEGnixFLKcPAL-5kVAjIUQXLPrk3IKFbz24E81Eh8imesc-kXyH8qclU6ljIVhSJzWkmrtagE9UZ2bH7fo23YSRCsUJfVaJu2lnxmu6qfu_FEw/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgdvKswD4Wk1GHQY9oISNCjJFIVUn4potASP4WYyj7CabWCPgWSnqrxJwsDYMIoGtwxHpWlQb0mHvhJyCNor9F-LYC6HP4SM2SWslTsxXWmNEXZ-KDNUZUJpObLJUAGUtFjey7Gnyj7UU/s1600/photo-7.png);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: -10px 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: -95px; 30px;
    font-size: 12px;}
.ch-info p a {
    display: block;
    color: #fff;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;}
.ch-info p a:hover {
    color: #fff222;
    color: rgba(255,242,34, 0.8);}
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;}
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;}
.ch-grid:after {
    clear: both;}
.ch-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}

*You can change image as your like im using 180x180 pixel

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<section class="main">
            
     <ul class="ch-grid">
       <li>
         <div class="ch-item">                
             <div class="ch-info">
                 <div class="ch-info-front ch-img-1"></div>
                    <div class="ch-info-back">
                                    <h3>Cake</h3>
                                    <p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
                                </div>    
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-2"></div>
                                <div class="ch-info-back">
                                    <h3>Blog</h3>
                                    <p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-3"></div>
                                <div class="ch-info-back">
                                    <h3>Nature</h3>
                                    <p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                
            </section>

 *You can change the header according to image, and URL also.

10. Now save your template. You are done.

Related Blogger Tips

• 7 Reasons Why You CAN’T Make Money Blogging
• Blogger Tip: Importing Your Blog
• Add Multi-Colored Popular Posts to Blogger
• Stylish Animated Blogger Recent Posts Widget to Blogger
• Red Color Glossy CSS Menu Bar For Blogger
• Add Animated CSS Image Labels For Blogger
• Stylish Lite Blue CSS Menu Bar For Blogger
• Amazing CSS Image Circle Hover Effect For Blogger
• How To Add Pop Up Email Subscription Form For Blogger Using Jquery
• How To Add Cool Jquery Featured Post Slider to Blogger
• Easy Zoom:Jquery image zoom effect for blogger
• How To Add Snow Effect On The Blogger Mouse Cursor Area
• Christmas Snow Falling Effect For Blogger Blogs
• How to add Unique Style Social Sharing Box For Blogger
• Awesome CSS3 Image Circle Hover Effect For Blogger
• 3 reasons why many bloggers get frustrated and what to do against it
• Changing Title Meta Tag can hurt Google Rankings
• Top 5 Ways To Create Conversions with Hangouts On Air
• Add Facebook Recommendations Bar To Blogger
• jQuery Popup For Facebook LikeBox to Blogger