Awesome CSS3 Image Circle Hover Effect For Blogger

Awesome CSS3 Image Circle Hover Effect For Blogger

Posted by Anti on 10:04 PM

In this tutorial im gonna explain how to add
circle image with nice hover effect. Actually,
this effect helps to make your blog attractive.
You can use this image circle for link to your
page or post,like contact me page, about me
page etc. SO , you can add similar image for
it.This whole effect made up by CSS and
HTML.You can check my similar post here
Amazing CSS Image Circle Hover Effect For Blogger

Awesome CSS3 Image Circle Hover Effect For Blogger

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  */
.Btrix-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
    position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
    height: 150px;
    border-radius: 50%;}
.Btrix-info-wrap {
    background: #07CFE0 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
    display: block;position: absolute;width: 150px;height: 150px;
    border-radius: 50%;
    background-position: center center; 
    -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
    opacity: 0;background: #07CFE0;pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-alP6HrM84Sws6vW-9iNlaDH-DlTjraeIndA0cOggj4zK-sdmSGMHUATYOUsQpRtl0aZZauJpBQrtIJFtQrx75P2vajtZMoWU_TCk7s1j3_moDWuiXpqycTG1KCaou2up3zgCCgb37-8/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewN8Ct6l-KLibBvM4diaFbJN5JuIXdU8U1NsYN1ON_WYFfqe5Y2WwNBM_wrcNJa1DPhn_wRM3n92iX2PBs6DtNLutlKUDQvX-av_deGi4xcWXJuAWO0CauphM2bcV50UvzDB3asLsvWk/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak9o5jDJkO39Jlq4oT5r7DNbDdNYlw2JzoPP-Zn6dpYlCot-Z05P0_k2v-C-o7wVkWz6OqORX7jJISTMnPGKkZwF_Z421vWD71_4BRwbUkcaNE5cQ7Uukw2tuJ-tW1RB2v5dkjD3YYKc/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
    color: #fff;
    text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: -60px 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
    display: block;color: #e7615e;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;
}
.Btrix-info p a:hover {
    color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;}
.Btrix-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
    content: '';
    display: table;}
.Btrix-grid:after {
    clear: both;}
.Btrix-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="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Fashion</h3>
By Blogger Trix  <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Nature</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Car</h3>
By Blogger Trix  <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li></ul></section>

*You can change the header according to image and image URL

10. Now save your template. You are done.