0

http://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery

In this link, there is the markup for a gallery. If you hover over the thumbnail, the picture appears. If you click the thumbnail, the image will stay (otherwise it disappears). If you click anywhere outside of the thumbnail, the image disappears.

My question, what would have to be done to prevent the image from disappearing if you click somewhere on the page outside of the image/thumbnail? I want the image to stay once you click the thumbnail no matter where you click (unless you click another thumbnail for a new image).

I have very little experience with coding so help would be much appreciated. Also, it is necessary for me to use this exact gallery.

Thank you!

miksham
  • 69
  • 2
  • 2
  • 9

1 Answers1

1

You cannot do this with CSS, because CSS cannot tell the difference between an item you have never hovered over and one you have finished hovering over. It only detects states, such as "not currently hovered over". So you have to use Javascript. With jQuery it looks like 

$("dt").on("mouseover", function() {
    // Hide other images only when we want to show a new one.
    $("dd").css("opacity", 0);
    $(this).next().css("opacity", 1);
});

Working JSFiddle

Community
  • 1
  • 1
Noumenon
  • 5,099
  • 4
  • 53
  • 73
  • Thank you very much! Works great. One last question if you can help me with it...how would you have it that the first image is default selected? The pictures only appear if you begin to hover over the thumbnails. I'd like the first thumbnail image to already appear on default. – miksham May 17 '16 at 15:23
  • 1
    I appreciate your polite attitude. `dl#simple-gallery dd:first-of-type { opacity: 1}` will work. – Noumenon May 17 '16 at 20:34
  • 1
    Works perfect. Thank you so much again Noumenon! :) – miksham May 17 '16 at 21:16