<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 ----------> <h1>iOS 10 STYLE SHADOWS</h1> <h4><a href="https://codepen.io/THEORLAN2/details/xEOxEB">Original</a> by <a href="https://codepen.io/THEORLAN2/">@THEORLAN2</a></h4> <div class="container"> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1083" /> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1082" /> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1081" /> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1080" /> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1074" /> <img class="ios-shadow" src="https://unsplash.it/800/600?image=1063" /> </div> <h1>With original images</h1> <h4>Images from the original work</h4> <div class="container"> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/desayuno.jpeg" /> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/mujer.jpeg" /> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/zorro.jpeg" /> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/paqueo.jpeg" /> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/desierto.jpeg" /> <img class="ios-shadow" src="http://dedicaundeseo.honor.es/img/flores.jpeg" /> </div> <script> (function(){ var imgs = document.getElementsByClassName("ios-shadow"), id = 0; var style = ""; for (var i = 0, j = imgs.length; i < j; ++i) { var img = imgs[i], src = img.src; var container = document.createElement("div"); container.className = "ios-shadow-container ios-shadow"; container.id = "ios-shadow-"+(++id); img.classList.remove("ios-shadow"); img.parentNode.insertBefore(container, img); container.appendChild(img); style += "#ios-shadow-"+id+"::after {"+ " background-image: url('"+src+"');"+ " content: '';"+ "}"; } var $style = document.createElement("style"); $style.appendChild(document.createTextNode(style)); document.head.appendChild($style); })(); </script>

/* must be in percentage */ body { margin: 0; padding: 16px; text-align: center; } h1, h4, a { font-weight: 200; font-family: 'Roboto'; color: #444; margin: 0; } h4 { font-weight: 400; color: #999; margin-bottom: 32px; } a { text-decoration: none; font-weight: 500; color: #666; } img { width: 100%; border-radius: 4px; } .ios-shadow { /* apply to top-level shadow element in case JS is disabled */ width: 32%; min-width: 256px; margin: 0 0.5% 0.5% 0; } .ios-shadow-container { /* styles applied only if the shadow was applied */ display: inline-block; position: relative; margin-bottom: 48px; font-size: 0px; /* some whitespace character is added for some reason */ } .ios-shadow-container::after { position: absolute; left: 2.5%; right: 2.5%; bottom: -16px; height: 48px; z-index: -1; background-size: 105.26316% 10000%; background-position: bottom; -webkit-filter: blur(15px); filter: blur(15px); }