Pop up image css link on hover

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 hov开发者_StackOverflow社区er.? 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?

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.

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>

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/