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*/
  }