Neat Hover Animation

You may have noticed on my home page that when you hover over the blurb icons it rotates 360 degrees and a dotted circle appears around it.

Today we will show how it’s done.

Below I have a div with class “hover-container” that sets all sub divs to inline-block:

.hover-container div {
 display:inline-block;
}

and then respectively left to right divs with classes “circle-hover1” building up to “circle-hover4” :

.circle_hover4 {
 border: 2px solid rgba(0,0,0,1.0);  /* circle-hover2 */
 -webkit-border-radius: 100%;        /* circle-hover3 */
 padding: 2px 2px 2px 2px;           /* circle-hover4 */
 transition: 0.5s ease !important;   /* circle-hover4 */
}

In the end all I am doing is creating a circle around the image with a 2px padding. Later, we’ll make the black border transparent.

Next, add some hover action.

.circle_hover7{
 -webkit-border-radius: 100%;
 border: 2px solid rgba(0,0,0,0.0); /* set line to full transparency */
 padding: 2px 2px 2px 2px;
 transition: 0.5s ease !important;
}
.circle_hover7:hover {
 border: 4px dotted rgba(155, 107, 36, 0.7); /* circle_hover5 */
 transform: rotate(-360deg);                       /* circle_hover6 */
}

 
And with full vendor prefixes:

.circle_hover7{
 -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
     -ms-border-radius: 100%;
        -border-radius: 100%;
 border: 2px solid rgba(0,0,0,0.0); /* set line to full transparency */
 padding: 2px 2px 2px 2px;
 -webkit-transition: 0.5s ease !important;
    -moz-transition: 0.5s ease !important;
     -ms-transition: 0.5s ease !important;
         transition: 0.5s ease !important;
}
.circle_hover7:hover {
 border: 4px dotted rgba(155, 107, 36, 0.7); /* circle_hover5 */
 -webkit-transform: rotate(-360deg);         /* circle_hover6 */
    -moz-transform: rotate(-360deg);         /* circle_hover6 */
     -ms-transform: rotate(-360deg);         /* circle_hover6 */
         transform: rotate(-360deg);         /* circle_hover6 */
}

Happy CSS-ing!

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.