[SOLVED] 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");
    }
}