DEV Community

Image Popup on hover

Sarah Chima on October 12, 2018

Recently, I had the task of making an image popup on hover. This gif above describes what I mean. I did not know how to do it but after some minu...

Read full post

Ben Sinclair • Oct 13 '18 • Edited

I have a suggestion to improve what you've coded - if you ditch the thumbnail images and instead resize the large images in the browser you'll save the extra weight of the thumbnails (since you're always downloading the larger image anyway) and use fewer HTTP requests:

<li>
  <img src="img/large1.jpg" alt="adventure" >
  <span class="large">
    <img src="img/large1.jpg" class="large-image" alt="adventure" >
  </span>
</li>

li > img {
  max-width: 40px;
}

What's the benefit here of not using Javascript?

If you're concerned about accessibility then you've swapped one problem for another - you have to modify the HTML to serve twice the number of images (i.e. it's not "pure" CSS) and will have to find a way of hiding those images and their alt attributes from screen readers, etc.

Sarah Chima • Oct 13 '18

Sounds like a great suggestion. So instead of requesting for two images, we use just one. This reduces the number of requests made. Thanks for the suggestion.

Ayrton Fidelis • Oct 15 '18

Nice article!

We could implement some lazy-loading by putting the large image as the background of an element that appears only when we hover the thumbnail.

Here's an example that demonstrate how lazy-loading would work:

<style>
 img:hover + .big {
  background-image: url('https://via.placeholder.com/300x300');
  width: 300px;
  height: 300px;
 }
</style>
<img src="https://via.placeholder.com/100x100">
<div class="big"></div>

Inspecting the network requests, we can see that the large image is just fetched when we hover the thumbnail.

Of course, we'd have to work a little harder with accessibility.

stevensonmt • Oct 13 '18

I like Ben Sinclair's suggestion more, but I was going to recommend modifying the display attribute rather than position to achieve a similar effect. I'm not sure it matters that much, but I would expect that to be a little more efficient on first render.

stevensonmt • Oct 13 '18

BTW, here's an example my daughter and I put together last year for her to learn about HTML and CSS, which is similar to what you've done but uses transitions and the display property instead of position. We'll work on font choice next year ;)
Repo: github.com/stevensonmt/pheniestem
Site: stevensonmt.github.io/pheniestem/s...

Esteban Rocha • Oct 12 '18

Very good! Love CSS only approaches when possible, BTW! also you could also apply some opacity and transition to that, to create a smooth change.

Sarah Chima • Oct 12 '18

That sounds like a great idea! I'll try that.

David J Eddy • Oct 12 '18

Nice Sarah! #backintheday This would have been lines and lines of js logic...then seperate js logic for every browser vendor. Amazing how things have changed...for the better :)

Sarah Chima • Oct 12 '18

Wow!!! That must have been tedious.

Andy Zhao (he/him) • Oct 12 '18

Awesome! Love that it's pure CSS!

Ezizeay • Nov 17 '19

what about several small hyperlinked images Popup on hover an image?