*,:before,:after { box-sizing:inherit; } .animation-menus-highlight { position:relative; margin:0 -12px 80px; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; } .animation-menus-highlight a:hover h3 { opacity:0; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); } .animation-menus-highlight a:before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; border: 9px solid #DDD; position: absolute; z-index: 1; left: 0; top: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .animation-menus-highlight ul { margin: 30px 0; padding: 0; text-align: center; } .animation-menus-highlight ul li { margin: -8px 9px; padding: 10px 0; display: inline-block; line-height: 190px; } .animation-menus-highlight li a { overflow: hidden; display: block; height: 208px; width: 208px; text-decoration: none; position: relative; border-radius: 50%; margin: 0 auto; padding: 9px; } .animation-menus-highlight a:hover { box-shadow:none; } .animation-menus-highlight a:hover:before { -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); transform:scale(0); } .animation-menus-highlight img { position: absolute; left: 9px; top: 9px; border-radius: 50%; } .animation-menus-highlight h3 { vertical-align: middle; margin: 0; padding: 3px 10px; opacity: 1; position: relative; display: inline-block; background: #FFF; width: auto; line-height: 20px; -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 2; color: #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }