css/javascript: checking pixels of image where hover effect is triggered

I am having a tricky problem concerning a simple hover effect. I have certain images (of circular shape, type .png, transparent backgrounds) - and when the user hovers over any image, its color is supposed to change (in this case, I am hiding current image and displaying its duplicate of a different color, using jquery .on(hover)).

However, the hover effect is acting funny: sometimes lagging (takes a few seconds before it takes off/ or when an image is approached from a certain corner the hover works, but when approached from another it doesn't. I don't have any transition delays applied.

You can see it here: /url removed/

You will note that one image, the smallest one with a lamp inside, is being particularly slow/problematic.

So I was wondering if there is a way to check the 'pixels' of my webpage that trigger the hover to see if it is caused by the image type/position/etc... Another thing I am suspecting is that the scaling is affecting hover (I have the whole container scaled down to 0.8 through css).

Any help is deeply appreciated.

If needed, here is the html:

<div class="container-wrapper">
<div class="our-values-container">
<img src="/wp-content/uploads/2020/01/black-circle1.png" class="vimg1 hideblack">
<img src="/wp-content/uploads/2020/01/grey-circle2.png" class="vimg2 grey">
<img src="/wp-content/uploads/2020/01/grey-circle3.png" class="vimg3 grey">
<img src="/wp-content/uploads/2020/01/grey-circle4.png" class="vimg4 grey">
<img src="/wp-content/uploads/2020/01/grey-circle5.png" class="vimg5 grey">
<img src="/wp-content/uploads/2020/01/grey-circle6.png" class="vimg6 grey">
<!------------------------------------------->
<img src="/wp-content/uploads/2020/01/grey-circle1.png" class="vimg1 grey">
<img src="/wp-content/uploads/2020/01/black-circle2.png" class="vimg2 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle3.png" class="vimg3 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle4.png" class="vimg4 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle5.png" class="vimg5 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle6.png" class="vimg6 hideblack">
<!-------------------------------------------->
<img src="/wp-content/uploads/2020/01/text-box1.png" class="txt1 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box2-grey.png" class="txt2 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-real-grey.png" class="txt3 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-grey.png" class="txt4 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box5-grey.png" class="txt5 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box6-grey.png" class="txt6 txtgrey">

</div>
</div>

Here is main part of the css:

  .our-values-container img{
        position: absolute; 
    }
    img.vimg1{
        top: 150px;  
        left: -12px;
        height: 123px;
    }
    img.vimg2{
        top: 225px;
        left: 97px;
        height: 130px;
    }

//the rest of the images are position in a similar manner
    img.txtgrey{    
        height: 280px;
    }

    img.hideblack{
        display: none;
    }
    img.grey.vimg1{
        display: none;
    }
    img.hideblack.vimg1{
        display: block;
    }
    .container-wrapper{
        transform: scale(0.8, 0.8); //the initial size was slightly bigger than needed
                                    //and I realized this after I positioned everything, so I resolved to 
                                    //scale it down.
    }

The javascript function:

function ourValues_page() {
    if ($(window).width() > 960) {
        $(".vimg1.grey").hover(function () {
            makeAllGrey2();
            $(".vimg1.grey").hide();
            $(".vimg1.hideblack").show();
            $(".txt1").attr("src", "/wp-content/uploads/2020/01/text-box1.png");

        }, function () {});
        $(".vimg2.grey").hover(function () {
            makeAllGrey2();
            $(".vimg2.grey").hide();
            $(".vimg2.hideblack").show();
            $(".txt2").attr("src", "/wp-content/uploads/2020/01/text-box2.png");

        }, function () {

        });
        $(".vimg3.grey").hover(function () {
            makeAllGrey2();
            $(".vimg3.grey").hide();
            $(".vimg3.hideblack").show();
            $(".txt3").attr("src", "/wp-content/uploads/2020/01/text-box3-real.png");


        }, function () {});
        $(".vimg4.grey").hover(function () {
            makeAllGrey2();
            $(".vimg4.grey").hide();
            $(".vimg4.hideblack").show();
            $(".txt4").attr("src", "/wp-content/uploads/2020/01/text-box3.png");

        }, function () {});
        $(".vimg5.grey").hover(function () {
            makeAllGrey2();
            $(".vimg5.grey").hide();
            $(".vimg5.hideblack").show();
            $(".txt5").attr("src", "/wp-content/uploads/2020/01/text-box5.png");
        }, function () {});
        $(".vimg6.grey").hover(function () {
            makeAllGrey2();
            $(".vimg6.grey").hide();
            $(".vimg6.hideblack").show();
            $(".txt6").attr("src", "/wp-content/uploads/2020/01/text-box6.png");

        }, function () {

        });


    }

    function makeAllGrey2() {
        $(".our-values-page .hideblack").hide();
        $(".our-values-page .grey").show();

        $(".txt1.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box1-grey.png");
        $(".txt2.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box2-grey.png");
        $(".txt3.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-real-grey.png");
        $(".txt4.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-grey.png");
        $(".txt5.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box5-grey.png");
        $(".txt6.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box6-grey.png");
    }
}

I'm not sure this is the best way to go about it, but your problem is that the certain images overlap each other so the hover on your icons are not working correctly.

This image shows that when I right click and inspect the lamp icon, I actually hover over the Collaboration content image.

If you put a z-index: 2; on the icons they overlap the content images so you should be able to at least have the hover work correctly.