"card"
Bootstrap 3.3.0 Snippet by aswanik11

<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 ----------> <!-- Follow me on Dribbble: https://dribbble.com/supahfunk Twitter: https://twitter.com/supahfunk Codepen: https://codepen.io/supah/ --> <div class="landing"> <div class="base"> <div class="image"> <img src="http://www.supah.it/dribbble/frame-dailyui-003.jpg" /> </div> <div class="copy"> <div class="logo"> <svg version="1.1" x="0px" y="0px" width="48px" height="27px" viewBox="0 0 48 27" enable-background="new 0 0 48 27" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" d="M37.527,26.994c-2.109,0-4.49-0.279-7.103-1.018 C19.701,22.947,15.346,11.96,14.921,9.2L23.735,0c0,0-1.806,8.389,3.557,13.584c3.339,3.236,7.071,4.037,9.924,4.037 c1.729,0,3.134-0.295,3.935-0.52L48,24.299C48,24.299,44.079,26.994,37.527,26.994z M40.726,18.6 c-0.849,0.185-2.069,0.374-3.51,0.374c-2.868,0-7.077-0.765-10.839-4.408c-3.443-3.336-4.223-7.775-4.267-10.932l-5.74,5.992 c0.402,1.532,1.54,4.306,3.513,7.064c2.006,2.805,5.524,6.465,10.896,7.983c2.273,0.642,4.543,0.968,6.748,0.968 c3.807,0,6.676-0.977,8.281-1.7L40.726,18.6z M24.584,0l8.07,8.173c0,0-0.742,4.112-2.334,6.709C30.32,14.882,22.407,10.77,24.584,0 z M16.726,15.911c0,0,2.23,4.33,6.266,7.089c0,0-9.717,7.793-22.992,1.625l7.115-7.361C7.115,17.264,12.584,18.672,16.726,15.911z" /> </svg> </div> <div class="title"> <small>There's no sobstitute for power.</small> Except more power.</div> <div class="text">What CrossFit has taught me, and what I think everyone <br /> can apply to their own fitness, is the idea that the body can <br />always do more. The average CrossFit WOD is deliberately<br /> designed to fatigue your body to the point where you don't<br /> think you can go on. The lesson in the WODs is that when<br /> your body is totally exhausted, you must look for a different<br /> energysource. And guess what?<br /> Your body will do it.</div> <a class="cta" target="_blank">play video</a> </div> </div> </div> <script> $('.base').clone().addClass('overlay').appendTo('.landing'); $('.cta').hover(function() { $('.overlay').toggleClass('over'); }); /*-------------------- Codepen Preview Tile --------------------*/ setTimeout(function() { $('.overlay').addClass('over').delay(600).queue(function() { $(this).removeClass("over").dequeue(); }); }, 400) </script>
/*-------------------- Reset & body --------------------*/ *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; } body { background: #100F1D; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; } body::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; background: -webkit-linear-gradient(48deg, #070c18, #1f141c); background: linear-gradient(42deg, #070c18, #1f141c); opacity: 0.9; } /*-------------------- Landing --------------------*/ .landing { position: relative; z-index: 2; width: 710px; height: 520px; margin: 25px auto; box-shadow: 0 3px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } .landing .logo svg { fill: #1E1C45; } .landing .base { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding: 38px; color: #082352; background: #fff; } .landing .image { display: none; } /*-------------------- Copy --------------------*/ .copy { position: relative; z-index: 2; } .copy .title { font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; margin-bottom: 30px; margin-left: -3px; background-image: -webkit-linear-gradient(45deg, #191A42, #B1499C); background-image: linear-gradient(45deg, #191A42, #B1499C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .copy .title small { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-top: 50px; line-height: 1; display: block; text-indent: 3px; } .copy .text { color: #282652; width: 400px; font-size: 90%; } .copy .cta { cursor: pointer; margin-top: 40px; background: -webkit-linear-gradient(65deg, #2f2d56, #6e355b); background: linear-gradient(25deg, #2f2d56, #6e355b); color: #fff; text-transform: uppercase; display: inline-block; border-radius: 30px; text-decoration: none; padding: 10px 30px; font-weight: 600; } /*-------------------- Overlay --------------------*/ .base.overlay { z-index: 2; -webkit-clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px); clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px); color: #fff; background: -webkit-linear-gradient(45deg, #082352, #6f2d52); background: linear-gradient(45deg, #082352, #6f2d52); -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .base.overlay.over { -webkit-clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px); clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px); } .base.overlay .logo svg { fill: #fff; } .base.overlay .image { display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; } .base.overlay .image::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; background: -webkit-linear-gradient(48deg, #082352, #6f2d52); background: linear-gradient(42deg, #082352, #6f2d52); opacity: 0.8; } .base.overlay .title { background-image: -webkit-linear-gradient(0, #fff, #fff); background-image: linear-gradient(0, #fff, #fff); } .base.overlay .text { color: #fff; } .base.overlay .cta { background: #fff; color: #0A2452; }

Related: See More


Questions / Comments: