Polaroid Style Image Gallery

Design & Layout © Tim's Design 2015

Polaroid Style Image Gallery Instructions

HTML Code

<div class="gallery"> <div class="polaroid"> <img src="img/image.jpg" /> <p>Polaroid style<br /> photo board</p> </div> <div class="polaroid"> <img src="img/image.jpg" /> <p>Each photo</p> </div> <div class="polaroid"> <img src="img/image.jpg" /> <p>Can show<br /> 2 lines of text</p> </div> <div class="polaroid"> <img src="img/image.jpg" /> <p>This should work in any<br /> browser that supports CSS3</p> </div> <div class="polaroid"> <img src="img/image.jpg" /> <p>See the below for 'how to'</p> </div> <div class="polaroid"> <img src="img/image.jpg" /> <p>Enjoy! :)</p> </div> </div>

CSS Code

@charset "utf-8"; /* CSS Document */ .gallery { padding:0 15px; background: url(img/cork.jpg); text-align: center; } .polaroid:before { width: 100%; height: 40px; content: " "; position: absolute; top: 0; left: 0; margin: -5% 0 0 0; z-index:1; background: url(img/pin.png) center no-repeat; background-size: contain; } .polaroid { font-family: 'Covered By Your Grace', cursive; line-height: 1em; font-size: 18px; text-align: center; display: inline-block; padding: 15px 12px 2px 12px; margin: 5px 5px; width: 200px; background: #fff; box-shadow: rgba(0,0,0,.5) 0 0 10px; } .polaroid:nth-child(1n) { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); } .polaroid:nth-child(2n) { -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } .polaroid:nth-child(3n) { -ms-transform: rotate(4deg); -webkit-transform: rotate(4deg); transform: rotate(4deg); } .polaroid:nth-child(4n) { -ms-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } .polaroid img { display: block; width: 100%; margin: 0 0 10px 0; -webkit-filter: sepia(.2) contrast(.9) brightness(1.1); filter: sepia(.2) contrast(.9) brightness(1.1); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .polaroid:hover img { -webkit-filter: sepia(0) contrast(1) brightness(1); filter: sepia(0) contrast(1) brightness(1); } .polaroid p { margin: 0; height: 40px; overflow: hidden; }

Images used in example

Design & Layout © Tim's Design 2015