类目页样式优化

app/code/Magento/Catalog/view/frontend/templates/product/list.phtml

@@ -44,6 +44,7 @@ $_helper = $block->getData('outputHelper');
      */
     $pos = $block->getPositioned();
     ?>
+
     <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>">
         <ol class="products list items product-items">
             <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
@@ -63,7 +64,20 @@ $_helper = $block->getData('outputHelper');
                     <a href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
                        class="product photo product-item-photo"
                        tabindex="-1">
-                        <?= $productImage->toHtml() ?>
+                        <span class="image0 image-switch">
+                            <span class="product-image-container product-image-container-<?= /* @noEscape */ $_product->getId() ?>" style="width: 440px;">
+                                <span class="product-image-wrapper" style="padding-bottom: 125%;">
+                                    <?= $productImage->toHtml() ?>
+                                </span>
+                            </span>
+                        </span>
+                        <span class="image1 image-switch">
+                            <span class="product-image-container product-image-container-<?= /* @noEscape */ $_product->getId() ?>" style="width: 440px;">
+                                <span class="product-image-wrapper" style="padding-bottom: 125%;">
+                                    <?= $productImage->toHtml() ?>
+                                </span>
+                            </span>
+                        </span>
                     </a>
                     <div class="product details product-item-details">
                         <?= $block->getProductDetailsHtml($_product) ?>

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -1390,6 +1390,79 @@ footer{
   }
 }
 
+//.product-items .product-item-photo:hover {
+//  transform: scale(1.02);
+//  transition: all 0.5s ease;
+//}
+
+.image0.image-switch {
+  postion: relative;
+}
+
+.image1.image-switch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom:0;
+  right: 0;
+  z-index: -1;
+  opacity: 0;
+  visibility: hidden;
+}
+
+
+.product-items .product-item-photo{
+  overflow: hidden;
+}
+@media (min-width: 992px) {
+  .product-item:hover .product-item-info .image0,
+  .product-list-item:hover .product-item-info .image0 {
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+.product-item:hover .product-item-info .image1,
+.product-list-item:hover .product-item-info .image1 {
+  opacity: 1;
+  visibility: visible;
+  z-index: 1;
+  -webkit-transform: scale(1.08);
+  -moz-transform: scale(1.08);
+  -ms-transform: scale(1.08);
+  -o-transform: scale(1.08);
+  transition: all 0.5s ease;
+}
+.product-item:hover .product-item-info .product-image-photo,
+.product-list-item:hover .product-item-info .product-image-photo {
+  opacity: 1;
+}
+.product-item .product-item-info,
+.product-list-item .product-item-info {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+.product-item .product-item-info .image0,
+.product-list-item .product-item-info .image0 {
+  transition: all 0.5s ease;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+}
+.product-item .product-item-info .image1,
+.product-list-item .product-item-info .image1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: -1;
+  visibility: hidden;
+  transition: all 0.5s ease;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+}
 @media(max-width:789px){
 .banner-4-cate{
 padding-bottom: 20px;