hossenpheffer
New Member
I'm working on an image grid and want to create an effect similar to this http://instagram.com/instagram/ (the images in the squares on the lower part of the page where the border expands. This is what I have so far:HTML:\[code\]<div id="page-title"> </div><div id="wrapper" style="min-height:300px;"> <!--start: Container --> <div class="container" style="margin-left:100px;"> <div style="position: absolute; width:200px; border: 1px solid black; height:200px;"> <div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids"> </div> </div> </div></div></div>?\[/code\]CSS:\[code\] .polaroids { background: #fff; float: left; width: 158px; height:158px; padding: 5px 5px 5px; text-align: center; text-decoration: none; color: #333; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transition: all .2s ease-in-out; border: 4px solid white; background-color: black; background-size: cover; background-position: center; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin:0 auto !important; } .polaroids:hover { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); z-index: 5; border-top: 10px solid white; border-bottom: 10px solid white; border-left: 8px solid white; border-right: 8px solid white; }?\[/code\]The middle div does not seem to want to centre. Where am I going wrong? http://jsfiddle.net/b5XDK/???