Phóng to hình ảnh sản phẩm khi hover nhưng không thay đổi kích thước

Bạn muốn tạo hiệu ứng khi hover vào sản phẩm thì hình đại diện phóng to nhưng không thay đổi kích thước? Hãy sử dụng đoạn code  CSS dưới đây:

/* Zoom when hover product*/
.woocommerce ul.products li.product a { 
    display: inline-block;
    overflow: hidden; 
  } 
.woocommerce ul.products li.product a img {
    display: block;
    transition: .3s ease-in-out;
  }
  .woocommerce ul.products li.product a:hover img {
    transform: scale(1.1);/*you can change number*/
  }

 

Share on facebook
Share on tumblr
Share on twitter
Share on linkedin

Bình luận

Mình không sử dụng tính năng bình luận trên website này. Bạn có thể liên hệ qua Hotline hoặc Zalo. Trân trọng.

Bài viết liên quan

Marketing quà tặng

Đối tác liên kết

0989 333 069
Chat Zalo