How to get this effect with CSS3? - css

Question

Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!

Answer 1

Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}

Answer 2

This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition

Answer 3

I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}