Kellie Bottrell Kellie Bottrell - 6 months ago 20
CSS Question

how do I get the thumbnails to display the larger original image on hover?

I have created an un-ordered list for an image gallery. On hover it currently displays the thumb nail, how to I adjust my code to get it to display the orginal larger imager?

A portion of my current code:



.gallery {
cursor: default;
list-style: none;
}
.gallery a {
cursor: default;
}
.gallery a .preview {
display: none;
}
.gallery a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.gallery img {
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.gallery li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.gallery .preview {
border-color: #000;
width: 200px;
height: 150px;
}

<div class="pictures">
<h1>S.O.S - Image Gallery</h1>
<ul class="gallery">
<li>
<a href="#">
<img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." />
<img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." class="preview" />
</a>
</li>
</ul>
</div>




rsn rsn
Answer

It already works, you just need to swap out the second image: https://jsfiddle.net/3q29wvyv/1/.

.gallery {
         cursor: default;
         list-style: none;
         }

   .gallery a {
         cursor: default;
         }

   .gallery a .preview
         {
          display: none;
         }

   .gallery a:hover .preview
         {
         display: block;
         position: absolute;
         top: -33px;
         left: -45px;
         z-index: 1;
         } 

   .gallery img {
         background: #fff;
         border-color: #aaa #ccc #ddd #bbb;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         padding: 2px;
         vertical-align: top;
         width: 100px;
         height: 75px;
         }

   .gallery li
         {
         background: #eee;
         border-color: #ddd #bbb #aaa #ccc;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         display: inline;
         float: left;
         margin: 3px;
         padding: 5px;
         position: relative;
         }

   .gallery .preview
         {
         border-color: #000;
         width: 200px;
         height: 150px;
         }
<div class="pictures">
   <h1>S.O.S - Image Gallery</h1>
   <ul class="gallery">
   <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Thumbnail1.jpg" alt="Newcastle PSA workplace group at the IRC." /><img src="https://www.trophycupcakes.com/sites/default/files/styles/standard_cupcake_detail/public/cupcakes/cupcake-red-velvet.jpg?itok=Zyu04GZ6" alt="Newcastle PSA workplace group at the IRC." class="preview" /></a>
   </li>
   </ul>
   </div>

Comments