<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 ----------> <figure class="effect1"> <img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350"> <figcaption>Skadoosh!</figcaption> </figure> <figure class="effect2"> <img src="http://www.catsuka.com/videos/player/vignettes/lascars_le_film_bande_annonce_old.jpg" alt="Skadoosh" width="350"> <figcaption>Skadoosh!</figcaption> </figure> <!-- Another Pen? codepen.io/Twikito -->

/* BASE */ figure { display:inline-block; padding:10px; margin:30px; border:1px solid #ddd; background:#fff; } figcaption { font:1.5em/2em "Rock Salt", cursive; color:#5b5983; } /* EFFECTS */ .effect1 { position:relative; } .effect1::before, .effect1::after { position:absolute; bottom:15px; top:80%; left:10px; z-index:-1; width:50%; max-width:300px; background:rgba(0,0,0,.8); content:""; box-shadow:0 15px 10px rgba(0,0,0,.7); transform: rotate(-3deg); } .effect1::after { right:10px; left:auto; transform: rotate(3deg); } .effect2 { position:relative; box-shadow:0 1px 4px rgba(0,0,0,.1), 0 0 40px rgba(0,0,0,.05) inset; } .effect2::after { position:absolute; top:50%; bottom:0; left:10px; right:10px; z-index:-1; border-radius:100px / 10px; content:""; box-shadow:0 0 20px rgba(0,0,0,.8); } /* BLAH BLAH */ html, body { height: 100%; } body { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; text-align:center; }