HTML 5 images stacked waterfalls flow layout effects

This is HTML 5 images stacked waterfalls flow layout effects
THE HTML
<div class="view"> <header class="header"> <nav class="demos"> <a class="demos__item" href="index.html">Default</a> <a class="demos__item demos__item--current" href="index2.html">Spring</a> </nav> </header> <section class="page page--mover"> <div class="la-square-loader"><div></div></div> </section> <div class="title-wrap"> <h1 class="title title--main">OH<em>!</em>SNAP</h1> <p class="title title--sub">Smart Auto-Filtering for your shots.</p> </div> <section class="page page--static"> <div class="page__title"> <h2 class="page__title-main"></h2> <p class="page__title-sub">Recreating the effect seen on the takeit website</p> </div> <ul class="grid"> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/1.jpg" alt="Some image"> <h3 class="grid__item-title">Natural saturation effects</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/2.jpg" alt="Some image"> <h3 class="grid__item-title">Auto-color and light</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/3.jpg" alt="Some image"> <h3 class="grid__item-title">That special blur</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/4.jpg" alt="Some image"> <h3 class="grid__item-title">Drama where you need it</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/5.jpg" alt="Some image"> <h3 class="grid__item-title">Realistic depth</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/6.jpg" alt="Some image"> <h3 class="grid__item-title">The common, but special</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/7.jpg" alt="Some image"> <h3 class="grid__item-title">Natural saturation effects</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/8.jpg" alt="Some image"> <h3 class="grid__item-title">That special blur</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/9.jpg" alt="Some image"> <h3 class="grid__item-title">Auto-color and light</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/1.jpg" alt="Some image"> <h3 class="grid__item-title">Natural saturation effects</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/2.jpg" alt="Some image"> <h3 class="grid__item-title">Auto-color and light</h3> </a> </li> <li class="grid__item"> <a class="grid__link" href="#"> <img class="grid__img" src="img/photos/3.jpg" alt="Some image"> <h3 class="grid__item-title">That special blur</h3> </a> </li> </ul> <button class="button button--load" aria-label="Load more images"> <svg class="polaroid" width="100%" height="100%" viewbox="0 0 220 243" preserveaspectratio="xMidYMid meet"> <rect class="polaroid__base" x="0" y="0" width="220" height="243" rx="5"></rect> <rect class="polaroid__inner" x="16" y="20" width="189" height="149"></rect> <g class="polaroid__loader"> <circle cx="61.5" cy="94.5" r="17.5"></circle> <circle cx="110.5" cy="94.5" r="17.5"></circle> <circle cx="159.5" cy="94.5" r="17.5"></circle> </g> </svg> <span class="button__text">Load more</span> </button> </section> <div class="device"> <div class="device__screen"></div> </div> <button id="showgrid" class="button button--view" aria-label="Show me more"> <svg width="100%" height="100%" viewbox="0 0 310 177" preserveaspectratio="xMidYMid meet"> <path fill="#FFFFFF" d="M159.875,174.481L306.945,27.41c2.93-2.929,2.93-7.678,0-10.606L292.803,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.896,0.79-5.303,2.197L154.572,130.287L26.946,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.897,0.79-5.303,2.197L2.197,16.804C0.733,18.269,0,20.188,0,22.107s0.732,3.839,2.197,5.303l147.071,147.071C152.197,177.411,156.945,177.411,159.875,174.481L159.875,174.481z"></path> </svg> </button> </div>
Tag: image effect
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu