plp image hover effects

by Sreeraj Saseendran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="product-image-wrapper" style="padding-bottom: 125%;">
        <img class="product-image-photo" src="https://bamford-dev.magetry.com/media/catalog/product/cache/e8685cd868de72ea449b527356f659d4/w/j/wj12-blue_main_1.jpg" loading="lazy" width="240" data-product-rollover-image="https://bamford-dev.magetry.com/media/catalog/product/cache/e8685cd868de72ea449b527356f659d4/w/j/wj11-blue_main_1.jpg" data-product-rollover-effect="none" height="300" alt="Olivia 1/4 Zip Light Jacket"></span>
        <style>
        
        .product-image-wrapper {
              display: block;
    height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width:240px;
    
    /*transform: rotateY(0deg);*/
    }
    .product-image-wrapper.asd:after, .product-image-wrapper.asd1:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: lightgrey;
    opacity: .9;
    }
    .product-image-wrapper.asd {
      transform: rotateY(180deg);
      transition: transform .6s;
    }
    .product-image-wrapper.asd1 {
      transform: rotateY(-180deg);
      transition: transform .6s;
    }
        </style>

JavaScript

var imageElem = jQuery(".product-image-photo");
    var imgSrc = imageElem.attr('src');
    var imgRollSrc = imageElem.attr('data-product-rollover-image');
jQuery(".product-image-wrapper").hover(
  function(){  
  jQuery(this).addClass("asd");
    //imageElem.fadeTo(400,0.30, function() {
                            
                            setTimeout(function(){
                            imageElem.attr('src', imgRollSrc);
             jQuery(".product-image-wrapper").removeClass("asd");               
                            },600);
                            
                       // }).fadeTo(400,1);
  },
  function(){    
  jQuery(this).addClass("asd");
  
    //imageElem.fadeTo(400,0.30, function() {
                            
                             setTimeout(function(){
                            imageElem.attr('src', imgSrc);
             jQuery(".product-image-wrapper").removeClass("asd");               
                            },600);
                        //}).fadeTo(400,1);
  },

)