diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 06b16b2a..6650a6c3 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -566,6 +566,79 @@ footer .footer-bottom {
 }
 .product-wrap .image {
   margin-bottom: 10px;
+  position: relative;
+}
+.product-wrap .image .image-old {
+  opacity: 1;
+  transition: all ease-out 0.4s;
+}
+.product-wrap .image .image-hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+.product-wrap .image .button-wrap {
+  width: 100%;
+  position: absolute;
+  z-index: 40;
+  bottom: -30px;
+  opacity: 0;
+  transition: all 0.3s ease-out;
+  display: flex;
+  justify-content: center;
+}
+.product-wrap .image .button-wrap a {
+  color: white;
+  display: block;
+  margin: 4px;
+  background-color: #252323;
+  width: 36px;
+  height: 38px;
+  text-align: center;
+  line-height: 38px;
+  border-radius: 4px;
+  text-decoration: none;
+  position: relative;
+}
+.product-wrap .image .button-wrap a > span {
+  font-size: 11px;
+  text-transform: none;
+  line-height: 18px;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  background-color: #000;
+  padding: 0 5px;
+  white-space: nowrap;
+  position: absolute;
+  bottom: calc(100% + 20px);
+  left: 50%;
+  transform: translate(-50%);
+}
+.product-wrap .image .button-wrap a > span::before {
+  content: "";
+  border: 5px solid transparent;
+  border-top-color: #000;
+  position: absolute;
+  bottom: -9px;
+  left: 50%;
+  margin-left: -5px;
+}
+.product-wrap .image .button-wrap a:hover span {
+  opacity: 1;
+  bottom: calc(100% + 7px);
+  z-index: 2;
+}
+.product-wrap .image:hover .image-hover {
+  opacity: 1;
+  transition: all ease-out 0.4s;
+}
+.product-wrap .image:hover .image-old {
+  opacity: 0;
+}
+.product-wrap:hover .button-wrap {
+  bottom: 10px;
+  opacity: 1;
 }
 .product-wrap .product-name {
   margin-bottom: 6px;
diff --git a/resources/beike/shop/default/css/product-style.scss b/resources/beike/shop/default/css/product-style.scss
index e139f8fb..898d8023 100644
--- a/resources/beike/shop/default/css/product-style.scss
+++ b/resources/beike/shop/default/css/product-style.scss
@@ -4,8 +4,99 @@
   margin-bottom: 26px;
   text-align: center;
 
+
+
   .image {
     margin-bottom: 10px;
+    position: relative;
+
+    .image-old {
+      opacity: 1;
+      transition: all ease-out .4s;
+    }
+
+    .image-hover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+
+    .button-wrap {
+      width: 100%;
+      position: absolute;
+      z-index: 40;
+      bottom: -30px;
+      opacity: 0;
+      transition: all .3s ease-out;
+      display: flex;
+      justify-content: center;
+
+      a {
+        color: white;
+        display: block;
+        margin: 4px;
+        background-color: #252323;
+        width: 36px;
+        height: 38px;
+        text-align: center;
+        line-height: 38px;
+        border-radius: 4px;
+        text-decoration: none;
+        position: relative;
+
+        >span {
+          font-size: 11px;
+          text-transform: none;
+          line-height: 18px;
+          transition: all .2s ease-in-out;
+          opacity: 0;
+          background-color: #000;
+          padding: 0 5px;
+          white-space: nowrap;
+          position: absolute;
+          bottom: calc(100% + 20px);
+          left: 50%;
+          transform: translate(-50%);
+
+          &::before {
+            content: "";
+            border: 5px solid transparent;
+            border-top-color: #000;
+            position: absolute;
+            bottom: -9px;
+            left: 50%;
+            margin-left: -5px;
+          }
+        }
+
+        &:hover {
+          span {
+            opacity: 1;
+            bottom: calc(100% + 7px);
+            z-index: 2;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .image-hover {
+        opacity: 1;
+        transition: all ease-out .4s;
+      }
+
+      .image-old {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:hover {
+    .button-wrap {
+      bottom: 10px;
+      opacity: 1;
+    }
   }
 
   .product-name {
diff --git a/themes/default/shared/product.blade.php b/themes/default/shared/product.blade.php
index 7efbc36d..9299e0d0 100644
--- a/themes/default/shared/product.blade.php
+++ b/themes/default/shared/product.blade.php
@@ -1,8 +1,27 @@
 <div class="product-wrap">
-  <div class="image"><a href="{{ $product['url'] }}"><img src="{{ $product['images'][0] ?? image_resize('', 400, 400) }}" class="img-fluid"></a></div>
+  <div class="image">
+    <a href="{{ $product['url'] }}">
+      <div class="image-old">
+        <img src="{{ $product['images'][0] ?? image_resize('', 400, 400) }}" class="img-fluid">
+      </div>
+      <div class="image-hover">
+        <img src="{{ $product['images'][1] ?? image_resize('', 400, 400) }}" class="img-fluid">
+      </div>
+    </a>
+    <div class="button-wrap">
+      <a href="" class="btn-left">
+        <i class="iconfont">&#xe77f;</i>
+        <span>加入收藏</span>
+      </a>
+      <a href="" class="btn-right">
+        <i class="iconfont">&#xf13a;</i>
+        <span>加入购物车</span>
+      </a>
+    </div>
+  </div>
   <div class="product-name">{{ $product['name'] }}</div>
   <div class="product-price">
     <span class="price-new">{{ $product['price_format'] }}</span>
     <span class="price-lod">{{ $product['origin_price_format'] }}</span>
   </div>
-</div>
+</div>
\ No newline at end of file