Here is my CSS code:
/*CSS Gallery Code*/ .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid gold; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 15px; left: 450px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>
Here is my HTML code:
<div class="gallerycontainer"> <!-- Gallery Row Horz --> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child21.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child21.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child19.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child19.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child18.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child18.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child15.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child15.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child25.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child25.jpg" /><br /></span></a> <br /> <!-- Gallery Row Horz--> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child2.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child2.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child4.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child4.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child8.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child8.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child11.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child11.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child12.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child12.jpg" /><br /></span></a> </div>
This code works perfect but I need to be able to scroll (not the whole page just the thumbs)(with a scroll box??) the list of thumbnails on the left and have the images show full size on the right as there hovered over. Thanks for any help with this.