Circle Image with css Hover Effect for Blogger

This Blogger Tutorial i am going to tell you how to add Circle Image with css Hover Effect for Blogger.this is very amazing and beautiful css effect with round Images your can also Link this Images to Feature Post.want to add this Widget to your blogger then just copy the below code and add this as HTML/Java widget in your blogger Layout and modify the code according to your need like image , url or Text..ENJOY

<style>
/* Egytricks.com  */
.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/AVvXsEgBvMb7DoXRoly3LKAnR7pltSPAGOUo0eIe8ZanxLxTNn86YmJ_zkQvqonCcsecBOqGBqTOiS53vilv0J4IeSVN6DH7cGl57uJnteG143WSfypYsnVPKWJwutwywezez-6jFUdbnGte914/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRWE4fuQCLjkyqBV8ovCZPmO7uD-sho65clnJEL5pvYCY5dyzsDs1-Ruhv1av1peXuFhL9vv_r5QGlj2CReYjmE7gNm38CK-YCLrKcrsJ92pYnW-KAVOEEqB5diTFLE4qgZ9XqszcZu0/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PMh-iDZzKevukWJJiwRSQ_mobx6Ww-kRmbV4kf-B-cGDO0Gj2EssyGvE_F-KsfEmGihCvd15K9dlpuIcWvwrQb20pEIFLtAnMz_KlcXxWI8idFzdrn-eNGkTj5OvYY459TC_ct8ydyg/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;
}
</style>
<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 Egytricks.com <a href="http://Egytricks.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 Egytricks.com <a href="http://Egytricks.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 Egytricks.com <a href="http://Egytricks.com/">View on Dribbble</a></p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
             
            </section>

Comment if any Problem or like this Post.. :)