Change picture when I hover over the picture's overlay

Question

I want to change the specific picture that I hover over. However, each pictures is underneath an overlay.

I found a solution to change the picture when I hover over the picture itself. However, I only can hover over the overlay (parent div to the picture).

<script  type='text/javascript'>
$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).attr("src","images/aboutR.png");},
    function() {$(this).attr("src","images/about.png");
    });
});
</script>

I'm new with Javascript and very thankful any help.

You should present some html and css to help people understand your problem — Maciej Kozieja, Sep 01 '18 at 12:36

Mtxz · Accepted Answer · 2018-09-01T15:12:07.733

Well, if your picture is in the said overlay, here's the code:

$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).find('img').attr("src","images/aboutR.png");},
    function() {$(this).find('img').attr("src","images/about.png");
    });
});

This should update all <img> tags src attributes that are within the .overlaydiv.

If you have multiple image in your overlay, and each should have a specific "new" image on hover, you can add new src as attribute on each image tag, and change your JS to use this new url contained in your attribute to change the img src (instead of hardcoding new URL in your JS).

Example:

<div class="overlaydiv">
    <img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
    <img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>

Javascript:

$(document).ready(function(){
    $(".overlaydiv").hover(
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('hover-src'));
            });
        },
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('default-src'));
            });
        });
});

This is a bit more flexible, and prevent hardcoding URL in your JS. It's also make it compatible with multiple image, having different version on overlay hover.

Note that we need default-src attribute to be able to "remember" the original src to set back on hover leave (after hover callback, when user moving out). You could achieve the same using .data() to remember the default-src.

VXp · Answer 2 · 2018-09-01T13:48:40.547

You can do it with pure CSS in multiple ways:

Using img elements:

div {
  display: inline-block; /* or "inline-flex", "inline-grid" */
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

.hidden, div:hover .shown {display: none}
.shown, div:hover .hidden {display: block}

<div>
  <img class="shown" src="https://placehold.it/200x200" alt="">
  <img class="hidden" src="https://dummyimage.com/200x200" alt="">
</div>

Using background: url():

div {
  position: relative;
  width: 200px;
  height: 200px;
  background: url(https://placehold.it/200x200), url(https://dummyimage.com/200x200) no-repeat;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

div:hover {
  background-size: 0, cover;
}

<div></div>

Mix of both:

div {
  width: 200px;
  height: 200px;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

img {display: block}

div:hover img {display: none}
div:hover {background: url('https://dummyimage.com/200x200') no-repeat}

<div>
  <img src="https://placehold.it/200x200" alt="">
</div>

Change picture when I hover over the picture's overlay

2 Answers2