Cách thu nhỏ hình ảnh css

Nhiều nhà phát triển sử dụng các hiệu ứng di chuột hình ảnh CSS thuần túy để tạo các trang web với một hoặc một số hoạt ảnh. Quá trình này có thể gặp khó khăn khi sử dụng jQuery, đặc biệt là khi các thuộc tính css3 đôi khi có thể xung đột với các hiệu ứng di chuột CSS thuần túy. Tuy nhiên, có nhiều cách để tạo hiệu ứng thu phóng hình ảnh khi di chuột tích hợp hiệu quả vào tất cả các trang web tiềm năng của bạn. Trình tạo trang web của chúng tôi cung cấp nhiều hoạt ảnh thu nhỏ hình ảnh hoặc hiệu ứng phóng to hình ảnh khi di chuột tương tự như hình ảnh CSS thuần túy trên hiệu ứng di chuột nhưng thân thiện hơn với người dùng. Sử dụng trình tạo của chúng tôi, bạn có thể dễ dàng tạo hiệu ứng thu phóng hình ảnh giúp di chuyển hình ảnh khi di chuột xa hơn khỏi trình xem

Nó hiển thị toàn bộ hình ảnh cho khách truy cập và khiến anh ta quan tâm hơn đến những gì anh ta có thể nhìn thấy khi di chuột qua các thành phần hình ảnh thu phóng khác. Không giống như sử dụng jquery hoặc hover bằng cách sử dụng CSS zoom on hover bên trong cấu trúc trang web đã hình thành, bạn có thể thêm hiệu ứng hover out hoặc zoom-in bất cứ lúc nào. Tất cả những gì bạn cần làm là chọn phần tử, chuyển đến phần hoạt ảnh trên, chọn di chuột, sau đó chọn thu nhỏ. Tương tự như di chuột bằng thuộc tính CSS, việc thêm hiệu ứng thu phóng cho hình ảnh, hình nền và phòng trưng bày sẽ tạo ấn tượng rộng giúp trang web của bạn có dung lượng và tính tương tác cao hơn

Giống như di chuột qua hình ảnh bằng hoạt ảnh CSS, hiệu ứng phóng to hình ảnh của chúng tôi và đặc biệt là hoạt ảnh thu nhỏ hình ảnh có thể cải thiện giá trị của chính nội dung chỉ với sự hiện diện của nó. Không giống như hiệu ứng phóng to khi di chuột, khi hiệu ứng di chuột của hình ảnh lớp phủ buộc người dùng phải tập trung vào các chi tiết trung tâm, thì tính năng thu nhỏ sẽ mang lại một bức tranh lớn hơn để khám phá. Hình ảnh sẽ hiển thị nhiều chi tiết nền hơn, không giống như di chuột bằng CSS kích thích chuyển đến nội dung. Bạn có thể cải thiện hiệu ứng thu phóng hình ảnh bằng các tùy chọn tùy chỉnh trên bảng thuộc tính

Có nhiều cách bạn có thể thêm hiệu ứng đặc biệt vào trang web của mình và một trong số đó là thêm Hiệu ứng thu phóng trên Hình ảnh khi người dùng di chuột qua chúng. Bạn tạo hiệu ứng zoom ảnh bằng css3 transitions. Điều đó có nghĩa là bạn có thể Phát triển Hình ảnh hoặc Thu nhỏ và Hình ảnh khi di chuột có thể được tạo bằng cách sử dụng chuyển đổi tỷ lệ CSS3

chuyển tiếp CSS

Chuyển đổi CSS, là một phần của bộ thông số kỹ thuật CSS3, cung cấp cách kiểm soát tốc độ hoạt ảnh khi thay đổi thuộc tính CSS

Ví dụ

Đoạn mã trên cho thấy div sẽ mất 2 giây khi di chuột qua nó để chuyển màu đường viền Đỏ sang Xanh lục

Tăng và thu nhỏ hình ảnh CSS

Từ các ví dụ sau, bạn có thể tìm hiểu cách Phát triển và Thu nhỏ hình ảnh với sự trợ giúp của quá trình chuyển đổi CSS

Sau khi đọc bài viết này, bạn sẽ học cách làm cho hình ảnh thu phóng mượt mà khi bạn di chuột. Và không chỉ tăng kích thước mà còn tạo hiệu ứng thu phóng

Chúng tôi sẽ chỉ sử dụng HTML và CSS. Chúng tôi sẽ không cần bất kỳ JavaScript nào

Vì vậy, hãy viết một số mã html. Chúng tôi sẽ đặt hình ảnh của chúng tôi img trong một khối với ảnh của lớp

Tôi không thêm bất kỳ lớp bổ sung nào vào hình ảnh ở đây để không làm bạn bối rối khi giải thích nó. Nhưng trong dự án của bạn, sẽ tốt hơn nếu bạn thêm một số lớp riêng vào thẻ img và gọi hình ảnh theo lớp này

Tiếp theo, hãy chuyển sang css. Với pseudo class hover chúng ta sẽ có thể thay đổi giá trị của các thuộc tính

Trong trường hợp này, chúng tôi sẽ phóng to hình ảnh bằng cách thay đổi thuộc tính biến đổi của nó. Hãy viết nó trong mã

.photo:hover img {
  transform: scale[1.1];
}

Ở đây chúng tôi có lời giải thích sau. khi bạn di chuột vào một khối chứa ảnh [ảnh lớp] thì ta thay đổi giá trị biến đổi của chính ảnh đó [img]

Giá trị Tỷ lệ là mức độ chúng tôi chia tỷ lệ hình ảnh. Giá trị mặc định là 1

Để thêm một chút mượt mà cho quá trình chuyển đổi, hãy thêm thuộc tính chuyển đổi cho thẻ img

img {
  transition: transform 0.25s;
}

Ở đây, chúng tôi đã chỉ định thuộc tính nào chúng tôi sẽ thay đổi và quá trình chuyển đổi sẽ kéo dài bao lâu

Bây giờ hình ảnh đang phóng to mượt mà, nhưng nó nằm ngoài khung điều kiện của nó. Để khắc phục điều này chúng ta cần thêm thuộc tính tràn vào khối ảnh với giá trị ẩn

.photo {
  overflow: hidden;
}

Nó giống như chúng ta đang nói. mọi thứ vượt ra ngoài khối này, chúng tôi ẩn

Nhưng đó không phải là tất cả, vì trình duyệt không biết kích thước khối của chúng tôi – vì vậy chúng tôi cần đặt nó. Và đối với hình ảnh, chúng ta phải đảm bảo rằng nó chiếm toàn bộ chiều rộng và chiều cao của khối ảnh

Bạn kết thúc với một mã như thế này

.photo {
  width: 400px;
  height: 350px;
  overflow: hidden;
}
img {
  transition: transform 0.25s;
}
.photo:hover img {
  transform: scale[1.1];
}

Ví dụ về công việc

Xem Pen Cách thu phóng mượt mà hình ảnh khi di chuột – hiệu ứng trên CSS thuần túy của Pelegrin [@pelegrin2puk] trên CodePen

Tôi hy vọng bạn đã hiểu nguyên tắc để bạn có thể thu phóng hình ảnh mượt mà khi di chuột. Tôi sẽ đính kèm video của chúng tôi, nơi tôi một lần nữa giải thích chi tiết mọi thứ

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

Làm cách nào để thay đổi kích thước hình ảnh trong CSS?

Làm cách nào để cắt hình ảnh trong CSS?