Mon, 2016-08-01 22:15
I have one large image and want to place 3 thumbnail images under the large image that will enlarge when hovered over. Right now when I do it I cannot get the three images the same height. I have attahced my code. Thanks in advance
HTML
<figure id="beginner"> <img src="beginnermensimage.jpg"> /*Large image*/ <div class="thumbnail1"> <a target="_blank" href="image1.jpg"> <img src="image1.jpg" alt="Fjords" </a> </div> <div class="thumbnail2"> <a target="_blank" href="forest.jpg"> <img src="image2.jpg" alt="Forest" </a> </div> <div class="thumbnail3"> <a target="_blank" href="lights.jpg"> <img src="image3.jpg" alt="Northern Lights" </a> </figure> </div>
CSS
img { max-width: 500%; /*Large image*/ .thumbnail1{ width:15%; margin: -220px 10px 0px 10px; } .thumbnail2{ width:15%; margin: -220px 0px 10px 220px; } .thumbnail3{ width:15%; margin: -220px 20px 10px 450px; } margin: 10px 10px 0px 0px; }
Tue, 2016-08-02 03:14
#1
Maybe I missed something
Since a div can't be the descendant of an img, how is this supposed to work? I see no reference to the :hover pseudo class, either. Can you point to a working example? Or a minimal test case with images? It's sometimes hard to debug an image issue without the images.
By the bye, the target attribute, while not deprecated, is obsolete, a poor practice and impolite.
gary
Wed, 2016-11-30 13:15
#2
Look for it here
Look for it here http://djangostars.com/blog/ , could find some useful tips. Helped me while I was starting me own project.