unistake Posted October 29, 2010 Share Posted October 29, 2010 Hi all, I have a simple image gallery that shows 3 thumbnails and a larger image 'on hover'. It works but I want to show the larger first image when as a standard image and change it when the other thumbnails are hovered over. Thanks for the help. The code I have is: <style type="text/css"> /* STYLE FOR THE IMAGE GALLERY /////////////////////////////////////////////////////////////////*/ /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .gallerycontainer{ position: relative; width:620px; height: 400px; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ margin-top: 15px; } .thumbnail span{ /*CSS for enlarged image*/ visibility:hidden; position: absolute; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 15px; left: 110px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style> </head> <body> <div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="../aircraft/G-BOAC1.jpg" width="100px" height="66px" border="0" /><span><img src="../aircraft/G-BOAC1.jpg" width="500px" height="350px" /><br />G-BOAC Picture 1</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="../aircraft/G-BOAC2.jpg" width="100px" height="66px" border="0" /><span><img src="../aircraft/G-BOAC2.jpg" width="500px" height="350px"/><br />G-BOAC Picture 2</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="../aircraft/G-BOAC3.jpg" width="100px" height="75px" border="0" /><span><img src="../aircraft/G-BOAC3.jpg" width="500px" height="350px" /><br />G-BOAC Picture 3</span></a> </div> </body> Quote Link to comment Share on other sites More sharing options...
Liamsorsby Posted November 9, 2010 Share Posted November 9, 2010 Like instead of you hovering over to show the image you mean large main image then when you hover over a thumbnail it changes to the larger image? So the thumbnails are all below? Quote Link to comment Share on other sites More sharing options...
unistake Posted November 9, 2010 Author Share Posted November 9, 2010 sorted it, never mind! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.