July 2, 2014

Weebly Tricks #59 - 7 Awesome Circle Hover Effects

Posted by Domz at 7/02/2014

7 circle hover effects for your Weebly Site


After learning the 8 image hover effects, here comes 7 more effects and this time we will use circles. The effects starts from simple to more interactive, just choose whatever suits you. I compiled the seven CSS in one external file so you can add different effects on one page alone. This tutorial is a bit tricky but relatively easy to follow. Simply read and understand them. Let's get the ball rolling!








All your photos will be resized to 220x220 which will perfectly handle the proportion. The overflowing technique has also been added to the external file.

FILES NEEDED
How to use these files? Click Here!




HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://myweeblytricksdemo.weebly.com/files/theme/7circleeffects.css" type="text/css" />
<style>
.ch1-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZENuO6hC0ck2pYlLwZKzrgu0uFbLH3JpFAFWdu_mW3lDA8SWPNPrAGS7hs_NM30HnCGS5nsJNb-EjsafnDjCtmmX9mP9NpQ8WCZffs_fVeMlQ8fyF9psz78XDQrt29ZnHLgLInx44moK/s1600/SEARCH.png);
background-size: 220px 220px;
}

.ch2-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0K8pMa2fdhYmv2ru8reWwIZZzgBuUu7bof6YIYhjJBzXbzs7TczWV_Dl5qwKEla726R9SD_5LjslI5a6WCDXKTZRrs3CfkNhf4YnfiedU4SErQrzUpgrXJwM8G9rSLzIlqgywvjhZlUyo/s1600/CSS3+Animated+Action+Buttons+++MY+WEEBLY+TRICKS.png);
background-size: 220px 220px;
}

.ch3-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybIsSkek4idfpNwA0EkqcjtP1ltzLn8fSTPBibxgkLr9UVuT2a2iUlt-5_war78ASeGwyq2FZGnLZvBADA25yUalN6aZpzVvkDXqYlZ2gxnFZuFvzHNaL7_aKfn5F-Zf0CDwt-RyTLXJN/s1600/Book+Flipping+Slideshow.jpeg);
background-size: 220px 220px;
}

.ch4-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA2jgTZN9rEiLWTPVBrohDUsxglfkSakY_NtGTZe63YSWgM_uFWbav-CLy2877QPAwqmJhYupvcM_ZzaCsXgg7YpGt5lFs2L3Q50OMgRHd9BY9XXUD4LUk3w23_SEpIE0JnGa9olcPz7a-/s1600/8+Awesome+Image+Hover+Effects+++MY+WEEBLY+TRICKS.png);
  background-size: 220px 220px;
z-index: 12;
}

.ch5-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYGRKx5lsMr_k0sj8mjT_RhgQK2Umnyufr7_j08YRIy_GvNIXQF4WJ780xGtFXQseKc-Edg1Wxyxh7buXFFCd6pJasloyw26v-emaTu-7wVjgDE0pCnhZrjJ2WD5C0SdUtzgpp9_VIeU0/s1600/Featured+Image+Zoomer+++MY+WEEBLY+TRICKS.png);
  background-size: 220px 220px;
}

.ch6-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4J18PjVDIuAaUWwbiYORdjd84PVRYAqCvMYV2P7PF-gF2zGEqQjyuVXBuYYGMAd8AvrO4IsBl468rfU-AE2xaCI_uf2wskqnWPbYy1DplDJRVmHi9C_ZWTr_dsR_8tdKE58Qy34VUpGL/s1600/Music+Album+Hover+Effects+++MY+WEEBLY+TRICKS.jpeg);
  background-size: 220px 220px;
}

.ch7-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyOuOQEPYHAOAxNgA8b-mPu7fMSZG2CoglNj0GJ-gS51CjA5_Lxv1NYEXfOTNCogMI46SJQ7G5FtR79NkEG3zAtbo6GCBzDMJ6klLjkfqr-ooBu-ee6ignsK0iDhkJaamlUIspWm3aM6A6/s1600/Before+and+After+Photo+Effects.jpeg);
  background-size: 220px 220px;
}
</style>

Notes:
Red text - Change with your site address.
Blue text - These are your seven selectors pointing to the image you will use. Ok, the .ch1-img-1 means your first image for the first circle, .ch2-img-1 for the second and so on. Don't edit them.
Green text - Change with the image source you will use for each circle.



BODY CODE
Where to place these codes? Click Here!

Circle 1.
<ul class="ch1-grid">
<li>
    <div class="ch1-item ch1-img-1">              
        <div class="ch1-info-wrap">
            <div class="ch1-info">
                <div class="ch1-info-front ch1-img-1"></div>
                <div class="ch1-info-back">
                    <h3>Animated Download Buttons</h3>
                    <p>by Mary Lou <a href="http://myweeblytricksdemo.weebly.com/css3-download-buttons.html">View Live Demo</a></p>
                </div>  
            </div>
        </div>
    </div>
</li>
</ul>

Circle 2.
<ul class="ch2-grid">
    <li>
        <div class="ch2-item ch2-img-1">
            <div class="ch2-info">
                <h3>Animated Action Buttons</h3>
                <p>by Mary Lou <a href="http://myweeblytricksdemo.weebly.com/css3-animated-action-buttons.html">View Live Demo</a></p>
            </div>
        </div>
    </li>
</ul>

Circle 3.
<ul class="ch3-grid">
    <li>
        <div class="ch3-item ch3-img-1">
            <div class="ch3-info">
                <h3>Book Flipping Slideshow</h3>
                <p>by Ger Versluis <a href="http://myweeblytricksdemo.weebly.com/book-flipping-photo-slideshow.html">View Live Demo</a></p>
            </div>
        </div>
    </li>
</ul>

Circle 4.
<ul class="ch4-grid">
    <li>
    <div class="ch4-item">
        <div class="ch4-info">
            <h3>Awesome Hover Effects</h3>
            <p>by ALESSIO ATZENI <a href="http://myweeblytricksdemo.weebly.com/8-awesome-image-hover-effects.html">View Live Demo</a></p>
        </div>
        <div class="ch4-thumb ch4-img-1"></div>
    </div>
</li>
</ul>

Circle 5.
<ul class="ch5-grid">
<li>
    <div class="ch5-item ch5-img-1">              
        <div class="ch5-info-wrap">
            <div class="ch5-info">
                <div class="ch5-info-front ch5-img-1"></div>
                <div class="ch5-info-back">
                    <h3>Featured Image Zoomer</h3>
                    <p>by Dynamic Drive <a href="http://myweeblytricksdemo.weebly.com/featured-image-zoomer.html">View Live Demo</a></p>
                </div>  
            </div>
        </div>
    </div>
</li>
</ul>

Circle 6.
<ul class="ch6-grid">
<li>
    <div class="ch6-item ch6-img-1">              
        <div class="ch6-info-wrap">
            <div class="ch6-info">
                <div class="ch6-info-front ch6-img-1"></div>
                <div class="ch6-info-back">
                    <h3>Music Album Hover</h3>
                    <p>by Helpblogger <a href="http://myweeblytricksdemo.weebly.com/music-album-hover-effects.html">View Live Demo</a></p>
                </div>  
            </div>
        </div>
    </div>
</li>
</ul>

Circle 7.
<ul class="ch7-grid">
<li>
    <div class="ch7-item">          
        <div class="ch7-info">
            <div class="ch7-info-front ch7-img-1"></div>
            <div class="ch7-info-back">
                <h3>Before and After Effects</h3>
                <p>by Dynamic Drive <a href="http://myweeblytricksdemo.weebly.com/before-and-after-effects.html">View Live Demo</a></p>
            </div>  
        </div>
    </div>
</li>
</ul>

Notes to all the 7 HTML above:
Blue text - These are your seven image classes that corresponds to the seven selectors in your header code and you don't have to change them.
Yellow text - Change with your preferred text strings.
Green text - Change with the link you are pointing to for your text string "View Live Demo".



CONCLUSION

These circle effects are so awesome that I will use them on my demo page. They are neat and they got everything (your image, text, links) with a unique hover effects which makes it more clicky :).

So, let me hear what do you think? Post it below or on the forum.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

  1. i tried the circle hover effects but it did not end up right. I tried pasting the header code after amending my site address, but it turned out funny. Hence i wondered if i got the header code in the correct location, so i tried pasting the header code in all 3 places, under seo, under css and under the advanced setting in individual page but the result is the same. Could anyone help me with that?

    http://alexisproperty.weebly.com/listings.html

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top