Skip to main content

Css Circle Hover Effects

Lets have a look on this special tutorial. This is all about Css tricks. You can create hover effects on any link but these are normal. Lets try something different shape that is Circle. Its the unique shape and css makes it so attractive. Since we use border-radius property in our css designs we can can create this circle shape. This can give you all new attractive web page. Believe me its too awesome just try it once. We can give some special effects as per our imagination.
Please note that this tutorial will only work as intended browsers that support responcive css properties.

Download the whole code.

We just need some html code a tricky css file and colorfull images to enhance the beauty.
Lets get started.

Html Code:


<section class="main">
   
    <ul class="ch-grid">
     <li>
      <div class="ch-item ch-img-1">
       <div class="ch-info">
       <h3>Common Questions</h3>
        <p><a href="http://www.tricktodesign.com">Trick To Design</a></p> 
        
       </div>
      </div>
     </li>
     <li>
      <div class="ch-item ch-img-2">
       <div class="ch-info">
        <h3>Just Do It</h3>
        <p><a href="http://www.tricktodesign.com">Trick To Design</a></p>
       </div>
      </div>
     </li>
     <li>
      <div class="ch-item ch-img-3">
       <div class="ch-info">
        <h3>Have Fun</h3>
        <p><a href="http://www.tricktodesign.com">Trick To Design</a></p>
       </div>
      </div>
     </li>
    </ul>
    
   </section>

Example Image:

Css Code:

In this example there is scaling and we'll animate the insert box shadow. So position of item is important. Insert box shadow and transition is :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}
As you noticed that this animation includes the change of background images. Its css desription is :
.ch-img-1 { 
    background-image: url(../images/1.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/2.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/3.jpg);
}
Elements are positioned correctly and the tranparency of background has some RGBA value. We set its opacity down to 0.
.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}
The links are in uppercase lettes and its color changes into yellow color. Its css coding is:
.ch-info p a {
    display: block;
    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: rgba(255,242,34, 0.8);
}
Last but not the least the discription of paragraph fade with delay, It is all about delay timing specified in css.
.ch-item:hover .ch-info p {
    opacity: 1;
}
This is all about this tutorial hope you have enjoyed it. Stay tunes with us for more tricks.

source codrops

Comments

  1. I like the way that how the simple way you are explained all about - CSS circle hover effects. It's a nice tutorial easy to use.

    ReplyDelete

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...