Question

I have an image with an overlay DIV which shows 2 images when I hover on the image, this works fine, but I want it to be dynamic and work for countless images on the page, currently it works for the first picture only, I’m not that good with javascript and jquery and would appreciate your help on this one.

Jquery Code:

$("#imageOverlay").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});

HTML Code:

<div id="imageOverlay">
  <div id="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>

CSS Code:

#imageOverlay {
    display: inline;
    position: relative;
}
#imageOverlay #hover {
    display: none;
    position: absolute;
    margin-top: 10px;
    margin-right: 10px;
    z-index: 2;
}
#imageOverlay #hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}

Answer 1

Use a class for #imageOverlay and #hover, you can only have one instance of an ID, so when you have more than one of those IDs, the function is only finding the first one. Also, just fade the container box, not each individual image. Also, use stop() before an animation to make sure you don’t get weird behavior when people are mousing on and off your element. Then, putting the main image first ensures that the hovered images are “on top” without having to worry about z-index.

HTML

<div class="imageOverlay">
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
  <div class="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
</div>

JS

//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
    function() {
        $(this).find(".hover").stop().fadeTo(200, 1);
    },
    function() {
        $(this).find(".hover").stop().fadeTo(200, 0);
    } //when writing clean code, be sure your closer ends at the same indent as your opener
);

CSS

.imageOverlay {
    display: inline-block;
    position: relative;
}
.imageOverlay .hover {
    position: absolute;
    top: 10px;
    right: 10px;
}
.imageOverlay .hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}

And your images should show up on top when you hover!