Monday, October 8, 2012

Amazing CSS Image Circle Hover Effect For Blogger

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.
blog-post-option
2. Now select "Template" Like Below.

Select-template

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/AVvXsEgD2jQ3RY_Zykv2xg5ccWOuj8956WbMANaCbUBruvzvpQGUMb7bl6x3Yc4-WA3ASmWs3y0E9vbOrPNghy21sRRNJmBXbLrKHG0xxU6d4XdDmRw383sOv61x_djwcQC5T-OPzZ82AWwo1GQ/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOFYUS7zkpdqS3AEeiZs8ZwqXh3MfoxAnhlNqwK4NANDbckrtoUcBzvmWI19UHb7q7ARF-oLtRRxrdR5jNe0RF7gNgz0vy0qyEzO6fJHPp73h5JpHw4y8a_QGCPC-0hugns1-zx8nwcs/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOP9PCFJiX0VO1ISMeSmdgmT_e9knossEtk7VKWvA_M9BJKI0vqRd8-GqNaPXlMHPzHR9M2gnDYLiy46j4AVYolSna8PX4nTNHkZ7npjB8AoiicbFKbXk5nUY4AJqbDQg-mStKJyiXA8/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.




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

3 comments:

  1. AnonymousNovember 11, 2012 at 4:37 AM

    when you change the size it alters the hover over the link. it moves it off of it. Help???

    ReplyDelete
  2. BloggertrixNovember 11, 2012 at 10:55 PM

    @Anonymous
    What is your URL?

    ReplyDelete
  3. UnknownApril 11, 2013 at 11:26 PM

    Great Working Thanks For Providing This Post..!
    http://www.wallpappersc.blogspot.com/

    ReplyDelete