CSS thu phóng hình ảnh di chuột

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

Thí 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

Trong đoạn mã này, chúng ta sẽ tìm hiểu cách phóng to/thu nhỏ một phần tử, đặc biệt là hình ảnh và hình nền khi di chuột bằng CSS thuần túy. Loại hiệu ứng này thường được sử dụng trong các phòng trưng bày, bán sản phẩm và các trường hợp kiểu danh mục đầu tư trong đó thiết kế có mục đích hiển thị cả chi tiết hình ảnh và thông tin

Để có hiệu ứng thu phóng, bạn cần sử dụng thuộc tính biến đổi CSS với số lượng tỷ lệ ưa thích của mình. Nó cho phép quản lý việc phóng to hình ảnh. Hoạt ảnh CSS được hưởng lợi từ khả năng tăng tốc phần cứng và do đó, có vẻ phẳng hơn so với các cách hoạt ảnh khác

Bạn có thể sử dụng các phần tử giả như. trước để thêm lớp phủ màu. Sau đó, phần tử con sẽ hiển thị lớp phủ màu khi bạn di chuột vào phần tử cha. Và cuối cùng, chúng tôi sẽ giới thiệu cách thêm văn bản vào lớp phủ của chúng tôi. Nó có thể được thực hiện bằng cách đặt văn bản trong thẻ hoặc làm cho nó chỉ hiển thị khi được di chuột

Ví dụ về thêm hiệu ứng phóng to khi di chuột bằng văn bản

  
    
  
  
    
Hover over the images to see the effect.
    

      

        

          London
        




      

      

        

          New York
        
      

    

Rê chuột vào các hình để xem hiệu ứng

Kích thước được đề xuất là biến đổi. tỷ lệ (1. 5), tạo hiệu ứng thu phóng 150%. Nếu thu phóng quá lớn, nó sẽ nằm ngoài chế độ xem

Xem một ví dụ khác trong đó

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ứ