I have the following code for a gallery I have input to our website: <!DOCTYPE html PUBLIC> <html> <head> <title>Meet the team</title> <style type="text/css"> body { background: #222; color: #eee; margin-top: 20px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } a { color: #FFF; } a:hover { color: yellow; text-decoration: underline; } .thumbnails img { height: 80px; border: 4px solid #555; padding: 1px; margin: 0 10px 10px 0; } .thumbnails img:hover { border: 4px solid #00ccff; cursor:pointer; } .preview img { border: 4px solid #444; padding: 1px; width: 400px; } </style> </head> <body> <div class="gallery" align="center"> <h2>Meet the team</h2> <div class="thumbnails"> <img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/> <img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/> <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/> <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/> </div><br/> <div class="preview" align="center"> <img name="preview" src="images/img1.jpg" alt=""/> </div> </div> </body> </html> Code (markup): For the larger image that appears on the mouseover, is there any way of showing some text that is dependent on the relevant picture (i.e. the text for img1 would be different from the text for img2) and I want this to be shown under the larger image. Please take into consideration I am new to this, so step by step instructions would be appreciated.
Thanks. When I do this, it puts the text on the small preview picture and not the bigger one, which unfortunately is not what I need.
You can show that text anywhere you want. It's in position: absolute; For instance. I added top: 300px; left: 250px; to it: https://jsfiddle.net/Lyrbxtc8/6/ Now the text will show in the same place for all pictures. Change that position to whatever you want.
Fantastic. Many thanks for this. As I said, I'm new to all this, so thanks for the help and patience.