"services"
Bootstrap 3.3.0 Snippet by evarevirus

<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 ----------> <section id="section-feature" class="container"> <div class="row"> <ul> <li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3>Gallia est omnis</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3>Gallia est omnis</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3><a href="#">Gallia est omnis</a></h3> <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3><a href="#">Gallia est omnis</a></h3> <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p> </div> </div> </li> <li id="sf-community" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3>Donec sed operae</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3>Donec sed operae</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3><a href="#">Donec sed operae</a></h3> <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3><a href="#">Donec sed operae</a></h3> <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p> </div> </div> </li> <li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3>Hi omnes lingua</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3>Hi omnes lingua</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3><a href="#">Hi omnes lingua</a></h3> <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3><a href="#">Hi omnes lingua</a></h3> <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> </div> </div> </li> <li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-star-half-o fa-5x"></i> </div> <h3>Idque Caesaris facere</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-star-half-o fa-5x"></i> </div> <h3>Idque Caesaris facere</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-star fa-5x"></i> </div> <h3><a href="#">Idque Caesaris facere</a></h3> <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-star fa-5x"></i> </div> <h3><a href="#">Idque Caesaris facere</a></h3> <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p> </div> </div> </li> </ul> </div> </section> <script> $(function () { $('#section-feature .sf-wrap') .hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }) .click(function(event) { //if (event.target.nodeName != 'A') { $(this).toggleClass('active'); //} }); }); </script>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800); body { font-size: 16px; line-height: 22px; color: #555; font-family: 'Raleway', sans-serif; font-weight: 300; text-shadow: rgba(0,0,0,.01) 0 0 1px; } #section-feature ul { margin: 100px 0 0 0; padding: 0; list-style: none; position: relative; } #section-feature li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; height: 240px; padding: 2%; float: left; margin-bottom: 40px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #section-feature .sf-wrap { background-repeat: no-repeat; position: absolute; max-width: 280px; width: 100%; height: 100%; left: 50%; margin-left: -140px; top: 0; -moz-perspective: 600px; -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; cursor: pointer; } .sf-mdl-left, .sf-mdl-right, .sf-mdl-left-full, .sf-mdl-right-full { position: absolute; left: 0; top: 0; width: 50%; height: 100%; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; overflow: hidden; } .sf-icon { position: absolute; top: 30px; text-align: center; width: 100%; left: 0; width: 200%; color: #e4610e; } .sf-mdl-left-full .sf-icon, .sf-mdl-right-full .sf-icon { color: #fff; } .sf-mdl-right, .sf-mdl-right-full { left: auto; right: 0; } .sf-mdl-left-full, .sf-mdl-right-full { background-color: #333; z-index: 9; color: #fff; } .sf-wrap a { color: #e4610e; text-decoration: none; } .sf-mdl-left, .sf-mdl-right { background-color: #fff; z-index: 10; } .sf-wrap > .sf-mdl-right-full, .sf-wrap > .sf-mdl-right { background-position: right -30px; } .sf-wrap > .sf-mdl-right, .sf-wrap > .sf-mdl-left-full { -moz-backface-visibility: hidden; -moz-transform-style: preserve-3d; -moz-transform-origin: 0 0; -moz-transform: rotateY(0deg); -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 0 0; -webkit-transform: rotateY(0deg); -o-backface-visibility: hidden; -o-transform-style: preserve-3d; -o-transform-origin: 0 0; -o-transform: rotateY(0deg); backface-visibility: hidden; transform-style: preserve-3d; transform-origin: 0 0; transform: rotateY(0deg); } .sf-wrap.hover > .sf-mdl-right { -webkit-transform: rotateY(-45deg); -moz-transform: rotateY(-45deg); -ms-transform: rotateY(-45deg); -o-transform: rotateY(-45deg); transform: rotateY(-45deg); background-color: #ececec; } .sf-wrap > .sf-mdl-left-full { -moz-transform-origin: 100% 0; -webkit-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .sf-wrap.active > .sf-mdl-right, .sf-wrap.hover.active > .sf-mdl-right { -moz-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .sf-wrap.active > .sf-mdl-left-full { -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .active .sf-mdl-left-full, .active .sf-mdl-right-full { z-index: 11; } .sf-wrap div h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; } .sf-wrap div h3, .sf-wrap div p { width: 200%; position: absolute; text-align: center; left: 0; top: 140px; } .sf-wrap div p { padding: 0 10%; line-height: 18px; font-size: 13px; top: 170px; } .sf-wrap div.sf-mdl-right h3, .sf-wrap div.sf-mdl-right-full h3, .sf-wrap div.sf-mdl-right p, .sf-wrap div.sf-mdl-right-full p, .sf-mdl-right .sf-icon, .sf-mdl-right-full .sf-icon { left: auto; right: 0; } .sf-wrap div.sf-mdl-left-full h3, .sf-wrap div.sf-mdl-right-full h3 { top: 115px; }

Related: See More


Questions / Comments: