<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <figure class="snip1557"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample96.jpg" alt="sample96" /><i class="ion-android-arrow-forward"></i> <h3>Malcolm Function</h3> <a href="#"></a> </figure> <figure class="snip1557 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample100.jpg" alt="sample100" /><i class="ion-android-arrow-forward"></i> <h3>Richard Tea</h3> <a href="#"></a> </figure> <figure class="snip1557"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample101.jpg" alt="sample101" /><i class="ion-android-arrow-forward"></i> <h3>Ingredia Nutrisha</h3> <a href="#"></a> </figure> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Poppins:300); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1557 { font-family: 'Poppins', Arial, sans-serif; position: relative; display: inline-block; overflow: hidden; margin: 8px; min-width: 230px; max-width: 315px; width: 100%; color: #000000; font-size: 16px; line-height: 1.2em; text-align: center; font-weight: 300; } .snip1557 *, .snip1557 *:before, .snip1557 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.65s ease; transition: all 0.65s ease; } .snip1557:after { -webkit-transition: all 0.65s ease; transition: all 0.65s ease; position: absolute; height: 0px; width: 0px; top: -478px; left: -478px; border-radius: 50%; border: 500px solid transparent; border-top-color: #000000; border-left-color: #000000; content: ''; opacity: 0.8; } .snip1557 img { max-width: 100%; vertical-align: top; } .snip1557 i { position: absolute; top: -10px; left: -10px; border-radius: 50%; color: #000000; display: block; z-index: 10; } .snip1557 i:before, .snip1557 i:after { border-radius: 50%; } .snip1557 i:before { color: #ddd; background-color: #fff; font-size: 37.64705882px; line-height: 64px; text-align: center; width: 64px; } .snip1557 i:after { position: absolute; top: -14px; bottom: -14px; left: -14px; right: -14px; border: 15px solid #ddd; border-top-color: #2980b9; border-left-color: #2980b9; content: ''; z-index: -2; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5); } .snip1557 i:hover { background-color: #D2B17F; cursor: pointer; } .snip1557 h3 { bottom: 0; color: #fff; letter-spacing: 2px; margin: 0; opacity: 0; padding: 10px 15px; position: absolute; right: 0; text-transform: uppercase; z-index: 3; } .snip1557 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; } .snip1557:hover:after, .snip1557.hover:after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .snip1557:hover img, .snip1557.hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .snip1557:hover i:before, .snip1557.hover i:before { color: #2980b9; } .snip1557:hover i:after, .snip1557.hover i:after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .snip1557:hover h3, .snip1557.hover h3 { opacity: 1; } /* Demo purposes only */ body { background-color: #212121; text-align: center; }