Anettediuntee
New Member
How would i go about (if possible) for when i zoom out the masonry images to stay in there positions instead of floating on top of the banner?html\[code\]<head> <title>_Box</title> <link href="http://stackoverflow.com/questions/15750939/styles.css" rel="stylesheet" type="text/css"></head><body> <script type="text/javascript" src="http://stackoverflow.com/questions/15750939/jquery.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15750939/masonry.js"></script> <script> $(function () { $('#container').masonry({ columnWidth: 1, itemSelector: 'div' }); }); </script> <div id="banner"> <img src="http://stackoverflow.com/questions/15750939/images/banner.png"/> </div> <div id="logo"></div> <div id="imagetrans"> <div id="container" class="clearfix masonry"> <div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/eventbox.png"/> </div> <div class="box2"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/forumbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/forumbox.png"/> </div> <div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/eventbox.png"/> </div> <div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/eventbox.png"/> </div> <div class="box3"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/top10box2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/top10box.png"/> </div> <div class="box1"> <img class="bottom" src="http://stackoverflow.com/questions/15750939/images/eventbox2.png"/> <img class="top" src="http://stackoverflow.com/questions/15750939/images/eventbox.png"/> </div> </div> </div></div>\[/code\]and the css\[code\]img { width: 100%; height: 100%;}html { height: 100%;}body { width: 900px; height: 500px; margin: 0 auto; background-image: url(images/gridbg.png);}#logo { margin-top: 130px; }#banner { position: absolute; left: 0; right: 0; top: 0px;}#container > div { margin: 5px;}.box1 { width: 350px; height: 250px;}.box2 { width: 150px; height: 150px;}.box3 { width: 150px; height: 350px;}#imagetrans { position: relative; margin: 0 auto;}#imagetrans img.top:hover,#container > div img.top:hover { opacity: 0;}#imagetrans img,#container > div img { position:absolute; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;}\[/code\]this is what it currently looks like without zooming out of the page...
and when zoomed out...
Any ideas?