Cách thu nhỏ hình ảnh trong CSS

Web ngày nay có đầy hình ảnh động. Ví dụ: một hoạt ảnh đơn giản có thể là hình ảnh phóng to trong sự kiện di chuột - trong vùng chứa khung nhìn cụ thể. Ở đây, khung nhìn không phải là màn hình, mà là một vùng chứa nhỏ hơn bao bọc hình ảnh của chúng ta

Tôi đã làm việc trên nhiều bố cục web yêu cầu hình thu nhỏ của bài đăng trên blog phải phóng to khi được di chuột nhưng bên trong phần tử vùng chứa

Bạn cũng có thể đã thấy hiệu ứng này trên nhiều thiết kế blog hiện đại. Xem demo trước để có cái nhìn tổng quan hơn

Bây giờ, bạn có thể nghĩ đến việc thực hiện điều này trực tiếp với jQuery, nhưng hãy đợi đã. Tại sao bạn lại sử dụng JavaScript khi bạn có CSS ​​ở đó để làm điều đó cho bạn?

Nếu bạn đang nghĩ đến JS để mang lại những hiệu ứng đơn giản này, thì bạn cần biết rằng bạn cũng có thể làm điều đó với CSS thuần túy mà không cần bất kỳ sự tham gia nào của JavaScript – bởi vì CSS3 đủ mạnh để tạo hoạt ảnh cho mọi thứ trong trình duyệt

Đồ ăn nhẹ CSS nhanh cho hiệu ứng thu phóng hình ảnh khi di chuột

Thực hiện thu phóng di chuột trong CSS là một điều khá đơn giản. Tất cả những gì bạn cần biết là một vài thuộc tính CSS3 và bạn đã sẵn sàng để tiếp tục, hãy để phần thủ thuật cho tôi, bởi vì nó không chỉ là biết các thuộc tính CSS

mánh khóe

Những người giỏi CSS đã biết rồi, giờ đến lượt bạn. Bây giờ chúng ta hãy đi vào khái niệm này

Chúng tôi cần một phần tử vùng chứa sẽ được di chuột qua và sau đó hình ảnh bên trong nó sẽ tạo hiệu ứng tương ứng, tôi. e. phóng to hoặc thu nhỏ theo nhu cầu

Lưu ý rằng hình ảnh sẽ phóng to khi di chuột bên trong phần tử vùng chứa và không đến hoặc chảy ra bên ngoài khi nó được phóng to

Vì vậy, ý tưởng cơ bản là giới hạn phần tử vùng chứa bằng thuộc tính tràn CSS

Các phần phóng to và hoạt ảnh sẽ được xử lý tương ứng với các thuộc tính chuyển đổi và chuyển đổi CSS3. Nghe có vẻ khá dễ dàng, phải không?

đánh dấu

HTML rất đơn giản. Chúng tôi có

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

3 là container bao bọc

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

4 của chúng tôi

Bạn có thể lặp lại đoạn mã này bao nhiêu lần tùy ý trong dự án của mình

CSS

Quan sát CSS bên dưới

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

Dịch

1. Đặt ẩn thuộc tính

   /* [1] The container */
   .img-hover-zoom {
     height: 300px; /* [1.1] Set it as per your need */
     overflow: hidden; /* [1.2] Hide the overflowing of child elements */
   }
   
   /* [2] Transition property for smooth transformation of images */
   .img-hover-zoom img {
     transition: transform .5s ease;
   }
   
   /* [3] Finally, transforming the image when container gets hovered */
   .img-hover-zoom:hover img {
     transform: scale(1.5);
   }

   5 cho vùng chứa để tránh hình ảnh chảy ra bên ngoài khi chuyển đổi. Bạn cũng có thể đặt một số chiều cao cho vùng chứa, giống như tôi đã làm, điều này hoàn toàn phù hợp với nhu cầu của tôi vào lúc này. Tìm hiểu thêm về thuộc tính tràn CSS
2. Việc thêm thuộc tính

   /* [1] The container */
   .img-hover-zoom {
     height: 300px; /* [1.1] Set it as per your need */
     overflow: hidden; /* [1.2] Hide the overflowing of child elements */
   }
   
   /* [2] Transition property for smooth transformation of images */
   .img-hover-zoom img {
     transition: transform .5s ease;
   }
   
   /* [3] Finally, transforming the image when container gets hovered */
   .img-hover-zoom:hover img {
     transform: scale(1.5);
   }

   6 sẽ thêm hiệu ứng mượt mà đó vào quá trình chuyển đổi hình ảnh. Nếu bạn chưa quen với quá trình chuyển đổi CSS này, bạn nên đọc thêm về chúng tại đây
3. Cuối cùng, đặt biến đổi tỷ lệ cho sự kiện di chuột trên hình ảnh sẽ thực hiện phần thu phóng

Xem lại Demo

Thêm hiệu ứng

Nếu chỉ cơ bản là không đủ đối với bạn, dưới đây là một số công thức làm sẵn để bạn lấy và sử dụng trong các dự án của mình

Mỗi hiệu ứng CSS được cung cấp bên dưới đều khác nhau, vì vậy bạn cũng sẽ cần một lớp chung i. e. vùng chứa hình ảnh của chúng tôi được bao gồm trong mỗi người trong số họ

/* The Image container */
.img-hover-zoom {
  height: 300px; /* Modify this according to your need */
  overflow: hidden; /* Removing this will break the effects */
}

HTML cơ bản

Đừng quên thay thế

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

7 bằng bộ chọn CSS bằng bộ chọn được liệt kê bên dưới. Tôi nghĩ bây giờ bạn đã hiểu cơ bản về những gì bạn phải thêm và những gì không

Phóng to nhanh

/* Quick-zoom Container */
.img-hover-zoom--quick-zoom img {
  transform-origin: 0 0;
  transition: transform .25s, visibility .25s ease-in;
}

/* The Transformation */
.img-hover-zoom--quick-zoom:hover img {
  transform: scale(2);
}

thu phóng điểm

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

0

Zoom-n-xoay

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

1

Phóng to chuyển động chậm

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

2

Làm sáng và phóng to

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

3

Zoom-n-pan ngang

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

4

Zoom-n-pan dọc

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

0

Làm mờ bằng tính năng Phóng to

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

1

Tô màu bằng cách phóng to

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

2

Tái bút. Tôi sẽ rất vui nếu bạn đề cập đến tôi ở đâu đó trong dự án của bạn cho việc này

Nhiều hơn những gì?

Hơn nữa, bạn có thể chơi với các thuộc tính chuyển đổi và chuyển đổi để mang lại nhiều hiệu ứng hấp dẫn hơn từ nó. Tôi cũng sẽ chia sẻ nhiều hiệu ứng bóng bẩy như vậy trong tương lai, bao gồm nhiều yếu tố hơn chứ không chỉ hình ảnh

Về lưu ý cuối cùng, tôi hy vọng điều này có ích cho bạn bằng cách này hay cách khác. Nếu có, hãy cho tôi biết trong các nhận xét bên dưới và tiếp tục hỗ trợ để có thêm nội dung như thế này. Chúc mừng

Chúng ta có thể thu nhỏ hình ảnh trong CSS không?

Làm thế nào bạn có thể phóng to và thu nhỏ một hình ảnh?