Multiple Poloroid Image Scale & Rotate - Create a collage of poloroid pictures that rotate on mouse hover and shows info text.
Example: View Code Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Multiple Poloroid Image Scale & Rotate</title> <meta name="author" content="Natalie Downe"> <style type="text/css"> /* Begin Multiple Poloroid Image Scale & Rotate */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Natalie Downe : http://media.24ways.org/2009/14/3/index.html : Creative Commons License == */ body {background-color:#E9E9E9;color:#333;font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;font-size:16px;} .amp {font-family:Garamond,Baskerville,Georgia,serif !important;font-style:italic;font-weight:normal;border:none;} a.polaroid {display:block;text-decoration:none;color:#333;padding:10px 10px 20px 10px;width:150px;border:1px solid #BFBFBF;background-color:white;z-index:2;font-size:0.7em;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-webkit-transition:-webkit-transform 0.5s ease-in;} a.polaroid:hover,a.polaroid:focus,a.polaroid:active {z-index:999;border-color:#6A6A6A;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);} .polaroid img {margin:0 0 15px;width:150px;height:150px;} a img {border:none;display:block;} .photo-album {position:relative;width:80%;margin:0 auto;max-width:70em;height:450px;margin-top:5em;min-width:800px;max-width:900px;} .photo-album .polaroid {position:absolute;} .photo-album h1 {position:absolute;z-index:5;top:150px;text-align:center;width:100%;line-height:1.9;} .photo-album h1 span {background-color:white;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;padding:0.4em 0.8em 0.3em 0.8em;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);border:1px solid #6A6A6A;} .photo-album .small {width:75px;padding:6px 6px 12px 6px;font-size:0.6em;} .photo-album .small img {width:75px;height:75px;} .photo-album .medium {width:200px;padding:13px 13px 26px 13px;font-size:0.8em;} .photo-album .medium img {width:200px;height:200px;} .photo-album .large {width:300px;padding:20px 20px 30px 20px;font-size:1em;} .photo-album .large img {width:300px;height:300px;} .photo-album .img1 {bottom:10px;right:365px;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);} .photo-album .img2 {top:50px;right:20px;-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);transform:rotate(-4deg);} .photo-album .img3 {left:400px;top:0;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);} .photo-album .img4 {top:10px;left:495px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);} .photo-album .img5 {bottom:0;right:0;-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);transform:rotate(1deg);} .photo-album .img6 {bottom:10px;right:156px;-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);transform:rotate(6deg);} .photo-album .img7 {bottom:0;left:400px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);} .photo-album .img8 {bottom:-20px;left:700px;-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);transform:rotate(-8deg);} .photo-album .img9 {bottom:0;left:0;-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);transform:rotate(-8deg);} .photo-album .img10 {top:0;left:20px;-webkit-transform:rotate(8deg);-moz-transform:rotate(8deg);transform:rotate(8deg);} .photo-album .img11 {top:0;right:0;-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);transform:rotate(-8deg);} .photo-album .img12 {top:0;left:680px;-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);transform:rotate(18deg);} .photo-album .img13 {bottom:-20px;right:630px;-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);transform:rotate(4deg);} .photo-album .img14 {top:90px;left:430px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);} .photo-album .img15 {left:176px;top:20px;-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);transform:rotate(-8deg);} a:hover,a:focus {z-index:5;} </style> </head> <body> <div class="photo-album"> <h1><span>Nat <abbr title="and" class="amp">&</abbr> Simon in New Zealand</span></h1> <a href="http://www.flickr.com/photos/nataliedowne/2254117707/in/set-72157604232220981" class="large polaroid img1"><img src="http://media.24ways.org/2009/14/img/volcanic.jpg" alt="">This breathtaking volcanic lake is at Wai-O-Tapu Thermal Wonderland</a> <a href="http://www.flickr.com/photos/nataliedowne/2254700486/in/set-72157604232220981/" class="polaroid img2"><img src="http://media.24ways.org/2009/14/img/waterfall.jpg" alt="">This lovely waterfall was at Rotorua in Rainbow Springs</a> <a href="http://www.flickr.com/photos/nataliedowne/2254704566/in/set-72157604232220981/" class="small polaroid img3"><img src="http://media.24ways.org/2009/14/img/leaf.jpg" alt="">Ferntastic</a> <a href="http://www.flickr.com/photos/nataliedowne/2311404989/in/set-72157604232220981/" class="medium polaroid img4"><img src="http://media.24ways.org/2009/14/img/whale.jpg" alt="">At Kaikoura we went whale watching!</a> <a href="http://www.flickr.com/photos/nataliedowne/2312219680/in/set-72157604232220981" class="polaroid img5"><img src="http://media.24ways.org/2009/14/img/seal.jpg" alt="">Found this little cutie on a walk in New Zealand!</a> <a href="http://www.flickr.com/photos/nataliedowne/2254789880/in/set-72157604232220981/" class="polaroid img6"><img src="http://media.24ways.org/2009/14/img/lake.jpg" alt="">An amazing bubbling volcanic spring, a bit muddy</a> <a href="http://www.flickr.com/photos/nataliedowne/2341399904/in/set-72157604232220981/" class="polaroid img7"><img src="http://media.24ways.org/2009/14/img/simon.jpg" alt="">Simon in a giant Kiwi, pretending to be a Kiwi (the bird)</a> <a href="http://www.flickr.com/photos/nataliedowne/2352603191/in/set-72157604232220981/" class="small polaroid img8"><img src="http://media.24ways.org/2009/14/img/albatross.jpg" alt="">Albatross in Dunedin</a> <a href="http://www.flickr.com/photos/nataliedowne/2340993237/in/set-72157604232220981/" class="medium polaroid img9"><img src="http://media.24ways.org/2009/14/img/raft.jpg" alt="">White water rafting in Queenstown</a> <a href="http://www.flickr.com/photos/nataliedowne/2306995686/in/set-72157604033893095/" class="polaroid img10"><img src="http://media.24ways.org/2009/14/img/whiteisland.jpg" alt="">White Island</a> <a href="http://www.flickr.com/photos/nataliedowne/2306989200/in/set-72157604033893095/" class="small polaroid img11"><img src="http://media.24ways.org/2009/14/img/sulphur.jpg" alt="">Sulphurous</a> <a href="http://www.flickr.com/photos/nataliedowne/2352608953/in/set-72157604232220981/" class="small polaroid img12"><img src="http://media.24ways.org/2009/14/img/sealions.jpg" alt="">Sea lions!</a> <a href="http://www.flickr.com/photos/nataliedowne/2341816430/in/set-72157604232220981/" class="small polaroid img13"><img src="http://media.24ways.org/2009/14/img/horses.jpg" alt="">Horse riding</a> <a href="http://www.flickr.com/photos/nataliedowne/2352490411/in/set-72157604232220981/" class="small polaroid img14"><img src="http://media.24ways.org/2009/14/img/camping.jpg" alt="">Stewart Island</a> <a href="http://www.flickr.com/photos/nataliedowne/2339184562/in/set-72157604232220981/" class="polaroid img15"><img src="http://media.24ways.org/2009/14/img/us.jpg" alt="">Us in a blue cave on the Franz Josef glacier</a> </div> <div align="center"><br /><br /><br />Do not use these images... they are copyright Natalie Downe</div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_134.html">Multiple Poloroid Image Scale & Rotate</a> page. ] </div> </body> </html>