2 replies [Last post]
johned22
johned22's picture
Offline
newbie
Last seen: 3 years 18 weeks ago
Timezone: GMT-7
Joined: 2016-08-01
Posts: 1
Points: 2

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;
 
 }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 11 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MarshallN
MarshallN's picture
Offline
newbie
Last seen: 3 years 5 days ago
Timezone: GMT+2
Joined: 2016-11-28
Posts: 1
Points: 1

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.