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!
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.
Recent Comments