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> Link to comment https://forums.phpfreaks.com/topic/217210-image-gallery-to-show-first-image/ 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? Link to comment https://forums.phpfreaks.com/topic/217210-image-gallery-to-show-first-image/#findComment-1132364 Share on other sites More sharing options...
unistake Posted November 9, 2010 Author Share Posted November 9, 2010 sorted it, never mind! Link to comment https://forums.phpfreaks.com/topic/217210-image-gallery-to-show-first-image/#findComment-1132434 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.