<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="rollovers grid"> <li class="logo_reveal"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Reveal</a> </li> <li class="logo_grow"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Grow</a> </li> <li class="logo_grow_alt"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Grow Alt</a> </li> <li class="logo_rotate"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Rotate</a> </li> <li class="logo_rotate_alt"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Rotate Alt</a> </li> <li class="logo_grow_rotate"> <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg> <span class="icon_contain"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg> </span> <a href="#">Logo Grow Rotate</a> </li> </ul>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); * { box-sizing: border-box; } .rollovers { overflow: hidden; list-style-type: none; margin: 0; padding: 1em; text-align: center; } .rollovers li { position: relative; display: inline-block; width: 13em; } .rollovers li a { position: relative; z-index: 1; display: block; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.25em; text-decoration: none; color: #000; padding: 4.7em 1em 1em; } .icon_contain { position: absolute; top: 3em; left: 50%; width: 4.375em; height: 4.375em; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .icon_contain .icon { position: absolute; top: 50%; left: 50%; fill: #fff; width: 35%; height: 35%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: fill 1s ease; transition: fill 1s ease; } .logo { position: absolute; width: 4.375em; height: 4.375em; top: 3em; left: 50%; fill: #eb3f32; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .icon_contain::before { content: ""; position: absolute; top: 50%; left: 50%; width: 73%; height: 73%; opacity: 1; background: #eb3f32; border-radius: .125em; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .logo_reveal .icon_contain::before { -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } .logo_reveal:hover .icon_contain .icon { fill: #eb3f32; } .logo_reveal:hover .icon_contain::before { opacity: 0; } .logo_grow .logo { -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .logo_grow .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); transform: translate(-50%, -50%) rotate(45deg) scale(1); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; } .logo_grow:hover .logo { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .logo_grow:hover .icon_contain .icon { fill: #eb3f32; } .logo_grow:hover .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; } .logo_grow_alt .logo { -webkit-animation: grow_alt 1s reverse; animation: grow_alt 1s reverse; -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } .logo_grow_alt .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); transform: translate(-50%, -50%) rotate(45deg) scale(1); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; } .logo_grow_alt:hover .logo { -webkit-animation: grow_alt .7s ease-out; animation: grow_alt .7s ease-out; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .logo_grow_alt:hover .icon_contain .icon { fill: #eb3f32; } .logo_grow_alt:hover .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; } @-webkit-keyframes grow_alt { 0% { -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } 80% { -webkit-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); } 100% { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } } @keyframes grow_alt { 0% { -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } 80% { -webkit-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); } 100% { -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } } .logo_rotate .logo { -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .logo_rotate .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); -webkit-transition: opacity .5s ease, -webkit-transform .5s ease; transition: opacity .5s ease, -webkit-transform .5s ease; transition: opacity .5s ease, transform .5s ease; transition: opacity .5s ease, transform .5s ease, -webkit-transform .5s ease; } .logo_rotate:hover .logo { -webkit-transform: translateX(-50%) rotate(0); transform: translateX(-50%) rotate(0); } .logo_rotate:hover .icon_contain .icon { fill: #eb3f32; } .logo_rotate:hover .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); opacity: 0; } .logo_rotate_alt .logo { -webkit-animation: rotate_alt 1s reverse; animation: rotate_alt 1s reverse; -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); } .logo_rotate_alt .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); transform: translate(-50%, -50%) rotate(45deg) scale(1); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; } .logo_rotate_alt:hover .logo { -webkit-animation: rotate_alt .7s ease-out; animation: rotate_alt .7s ease-out; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .logo_rotate_alt:hover .icon_contain .icon { fill: #eb3f32; } .logo_rotate_alt:hover .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(135deg) scale(0); transform: translate(-50%, -50%) rotate(135deg) scale(0); opacity: 0; } @-webkit-keyframes rotate_alt { 0% { -webkit-transform: translateX(-50%) rotate(90deg) scale(0); transform: translateX(-50%) rotate(90deg) scale(0); } 80% { -webkit-transform: translateX(-50%) rotate(-15deg) scale(1.2); transform: translateX(-50%) rotate(-15deg) scale(1.2); } 100% { -webkit-transform: translateX(-50%) rotate(0) scale(1); transform: translateX(-50%) rotate(0) scale(1); } } @keyframes rotate_alt { 0% { -webkit-transform: translateX(-50%) rotate(90deg) scale(0); transform: translateX(-50%) rotate(90deg) scale(0); } 80% { -webkit-transform: translateX(-50%) rotate(-15deg) scale(1.2); transform: translateX(-50%) rotate(-15deg) scale(1.2); } 100% { -webkit-transform: translateX(-50%) rotate(0) scale(1); transform: translateX(-50%) rotate(0) scale(1); } } .logo_grow_rotate .logo { -webkit-transform: translateX(-50%) rotate(90deg) scale(0); transform: translateX(-50%) rotate(90deg) scale(0); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .logo_grow_rotate .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1); transform: translate(-50%, -50%) rotate(45deg) scale(1); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, -webkit-transform 1s ease; transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease; } .logo_grow_rotate:hover .logo { -webkit-transform: translateX(-50%) rotate(0) scale(1); transform: translateX(-50%) rotate(0) scale(1); } .logo_grow_rotate:hover .icon_contain .icon { fill: #eb3f32; } .logo_grow_rotate:hover .icon_contain::before { -webkit-transform: translate(-50%, -50%) rotate(135deg) scale(0); transform: translate(-50%, -50%) rotate(135deg) scale(0); opacity: 0; } .grid li { width: 50%; padding: 3em 0; float: left; border-right: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); } .grid li:nth-child(2n) { border-right: none; } .grid li:last-child { border-bottom: none; } .grid li:nth-last-child(2) { border-bottom: none; } @media (min-width: 45em) { .grid li { width: 33.333333%; } .grid li:nth-child(2n) { border-right: 1px solid rgba(0, 0, 0, 0.25); } .grid li:nth-child(3) { border-right: none; } .grid li:last-child { border-right: none; border-bottom: none; } .grid li:nth-last-child(2), .grid li:nth-last-child(3) { border-bottom: none; } }