Pop up image css link on hover

Question

I am trying to use the following technique http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ to create a pop up image hover effect that I am dynamically generating with php. I have one problem with this technique that every single image is downloaded when the page loads. How can I have css only download the image on hover.? Right now css is pushing the images off the screen when the page loads (left: -1000px;) then brings them back into view on hover.Is it possible with css to accomplish this then what other choices do I have?

jQuery would be a really easy way to do this – Jordan Foreman Jul 21 '11 at 19:00 — Jordan Foreman, Jul 21 '11 at 19:00

score 1 · Answer 1 · answered Feb 27 '16 at 06:16

1

Instead of setting the img src attribute to the link. Set the attribute data-src with that link. When you hover set the src of the image from the data-src attribute. The browser will load it in then.

answered Feb 27 '16 at 06:16

Josh S.

612
3
8

score 1 · Answer 2 · edited Sep 29 '16 at 09:11

HTML Code Here

.gallerycontainer {
  position: relative;
}
.thumbnail img {
  border: 1px solid white;
  margin: 0 5px 5px 0;
}
.thumbnail:hover {
  background - color: transparent;
}
.thumbnail:hover img {
  border: 1px solid blue;
}
.thumbnail span {
  position: absolute;
  background - color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}
.thumbnail span img {
  border - width: 0;
  padding: 2px;
}
.thumbnail:hover span {
  visibility: visible;
  top: 0;
  left: 230px;
  z-index: 50;
}

<div class="gallerycontainer">
  <a href="#thumb" class="thumbnail">
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg"><br>Simply beautiful.</span>
  </a>
  <a href="#thumb" class="thumbnail">
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg"><br>So real, it's unreal. Or is it?</span>
  </a>
  <br>
</div>

This will still load the images when the page loads. Even though this is almost 5 years old, it's not what he wanted. — MortenMoulder, Feb 27 '16 at 07:23

score 0 · Answer 3 · answered Jul 21 '11 at 19:18

0

Take a look at Lazy Loading your images using jQuery: http://www.appelsiini.net/projects/lazyload

Here are some other options: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

answered Jul 21 '11 at 19:18

Digitz

323
2
5

Apparently that Lazy Loading plugin does not work in the latest browsers. – Jason Gennaro Jul 21 '11 at 19:27
Just tested in Chrome, lazyload does work (it makes a call as more images are required after the initial loading is done). – Muhammad Usman Jul 21 '11 at 21:00

Pop up image css link on hover

3 Answers3

Linked