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: all 0.5s ease-in; } a.polaroid:hover, a.polaroid:focus, a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); } .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; }