"card"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!-- Vogue css card box-shadow http://www.vogue.com/magazine/ --> <!-- https://dribbble.com/shots/2537470-Article-Cards --> <article class="card"> <figure> <picture> <img class="picture-img" srcset="http://media.vogue.com/r/w_410/2016/02/17/fashion-industry-disruptors-alexander-wang.jpg" alt="A Rabble-Rousing Posse Is Driving Fashion Into the Future"> </picture> </figure> <div class="card--info"> <h3 class="category">Featured</h3> <h2 class="title"> Blue Ocean Waves Crash </h2> <p class="teaser"> See the beautiful oceans of the Pacific coast where the water is so clean you can see the sand. </p> <a href="#" class="button"> Read More </a> </div> </article>
p { font-size: 16px; line-height: 24px; text-align: center; } .card { width: 570px; /*height: 390px;*/ background: #F9F9F9; -webkit-box-shadow: 0 80px 45px -95px #000; -moz-box-shadow: 0 80px 45px -95px #000; box-shadow: 0 80px 45px -95px #000; margin: 0 auto; overflow: hidden; padding: 0; -webkit-transition: box-shadow .2s; -moz-transition: box-shadow .2s; transition: box-shadow .2s; } .card:hover { -webkit-box-shadow: 0 80px 45px -88px #000; -moz-box-shadow: 0 80px 45px -88px #000; box-shadow: 0 80px 45px -88px #000; } .card figure { float: left; width: 300px; position: relative; margin: 0; } .card picture { display: block; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s; } .card:hover picture { opacity: .1; } .card img { width: 100%; height: auto; display: block; } .card--info { width: 210px; padding-left: 30px; padding-right: 30px; float: left; } .card .category { position: relative; margin-top: 50px; } .category { text-transform: uppercase; font-size: 11px; font-weight: bold; letter-spacing: .12em; text-align: center; font-family: Helvetica, Arial, sans-serif; color: #A5A5A5; } .category:after { content: ""; width: 55px; height: 2px; position: absolute; background: #ddd; top: 22px; left: 37%; } .title { position: relative; top: 20px; font-size: 35px; text-align: center; font-family: Georgia, Times New Roman; font-weight: 100; } .teaser { position: relative; top: 24px; color: #909090; font-family: Georgia, Times New Roman; font-size: 14px; } .card .button { position: relative; border: 1px solid #929191; padding: 10px; border-radius: 20px; text-decoration: none; color: #999; display: block; text-align: center; top: 35px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; width: 60%; margin: 0 auto; }

Related: See More


Questions / Comments: