<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 ----------> <div class="box"> <div class="box__circle box__circle--blue"></div> <div class="box__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg> </div> <h1 class="box__headline">Headline</h1> <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p> </div> <div class="box"> <div class="box__circle box__circle--violet"></div> <div class="box__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg> </div> <h1 class="box__headline">Headline</h1> <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p> </div> <div class="box"> <div class="box__circle box__circle--purple"></div> <div class="box__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 512 512"><path fill="#fff" d="M272 191.997l47.999 47.999-47.999 47.999-47.999-47.999zM208.007 256l48.001 48.001-175.998 175.998-48.001-48.001zM256 32h32v64h-32zM385.131 149.497l-22.627-22.627 45.254-45.254 22.627 22.627zM113.606 104.234l22.627-22.627 45.254 45.254-22.627 22.627zM362.505 353.126l22.627-22.627 45.254 45.254-22.627 22.627zM416 224h64v32h-64z"/></svg> </div> <h1 class="box__headline">Headline</h1> <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quas expedita saepe dignissimos nesciunt, nihil dolores, quis ea esse voluptas.</p> </div>

@import url("https://fonts.googleapis.com/css?family=Roboto"); body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .box { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; margin: 0 1em; padding: 150px 3em 3em; width: 300px; overflow: hidden; box-shadow: 0 2px 4px transparent; -webkit-transition: box-shadow ease 1s; transition: box-shadow ease 1s; } .box:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); -webkit-transition-delay: .2s; transition-delay: .2s; } .box__circle, .box__icon { position: absolute; top: calc(50% - 2.5em); left: calc(50% - 2.5em); width: 5em; height: 5em; -webkit-transition: -webkit-transform ease 1s; transition: -webkit-transform ease 1s; transition: transform ease 1s; transition: transform ease 1s, -webkit-transform ease 1s; -webkit-transition-delay: .2s; transition-delay: .2s; will-change: transform; } .box__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .box:hover .box__icon { -webkit-transform: translateY(-95px); transform: translateY(-95px); } .box__circle { border-radius: 100%; } .box__circle--blue { background: -webkit-linear-gradient(#3170c7, #38bed3); background: linear-gradient(#3170c7, #38bed3); } .box__circle--violet { background: -webkit-linear-gradient(#6e18ca, #c32d83); background: linear-gradient(#6e18ca, #c32d83); } .box__circle--purple { background: -webkit-linear-gradient(#7f38d3, #7ec3d1); background: linear-gradient(#7f38d3, #7ec3d1); } .box:hover .box__circle { -webkit-transform: translateY(-200px) scale(14); transform: translateY(-200px) scale(14); } .box__headline { margin: 0 0 1em; font-weight: 400; font-size: 1.6em; } .box__text { margin: 0; line-height: 1.5; } .box__headline, .box__text { position: relative; color: white; opacity: 0; -webkit-transition: opacity ease 1s; transition: opacity ease 1s; will-change: opacity; } .box:hover .box__headline, .box:hover .box__text { opacity: 1; -webkit-transition-delay: .4s; transition-delay: .4s; }