Css di chuột phóng to hình ảnh

Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom cho các thành phần trong website bằng HTML, CSS và Javascript nhé

Nội dung chính Hiển thị

• Cách Tạo Hiệu Ứng Zoom CSS
• Cách Tạo Hiệu Ứng Phóng To CSS
• Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng phóng to cho hình ảnh khi người dùng di chuột qua đoạn mã sau nhé

  Bên trên là cấu trúc HTML chứa hình ảnh, bao bọc bên ngoài sẽ là thẻ div có lớp, bên trong sẽ có thêm thẻ bao bọc bên ngoài hình ảnh, bạn có thể sử dụng thẻ div, p. tùy ý

  Hiệu ứng CSS thay đổi kích thước hình ảnh khi đưa con trỏ chuột vào

  Để tạo điểm nhấn trong trang web thiết kế, việc sử dụng hiệu ứng phóng to thu nhỏ bằng CSS là quan trọng

  Trong nhiều dự án thiết kế web của mình, chắc chắn rằng các bạn sẽ gặp phải việc sử dụng hiệu ứng phóng to hoặc thu nhỏ bất kỳ phần tử HTML nào trong đó, bài viết này sẽ hướng dẫn các bạn cách sử dụng các thuộc tính biến đổi. scale(value) trong CSS để thực thi điều đó

  Phóng to, thu nhỏ sử dụng thuộc tính biến đổi. scale(value) in CSS

  Mình sẽ hướng dẫn các bạn cách tạo hiệu ứng phóng to và thu nhỏ cho một phần khối DIV. Để tạo hiệu ứng phóng to thu nhỏ, chúng ta cần tập trung vào hai yếu tố “chiều rộng” và “chiều cao”. Đầu tiên xác định chiều rộng thích hợp cao hơn của một phần tử

  Thêm Css vào phần tử HTML
  Chúng ta cần sử dụng @keyframes để xác định hoạt ảnh

  Sau đây là mã css để tạo hiệu ứng

  .zoom-in-zoom-out {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: green;
    animation: zoom-in-zoom-out 2s ease-out infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  Trong khi sử dụng thuộc tính biến đổi. scale(value) in CSS then with value is

  giá trị < 1. Thu nhỏ đối tượng.
  giá trị = 1. Default value of object.
  giá trị > 1. Phóng to đối tượng.

  Giờ chúng ta sẽ đi vào cách tạo hiệu ứng hover zoom effect bằng một ví dụ khác nhé

   Hiệu ứng Zoom
   
  Bạn hãy hover vào thẻ div bên dưới
   

  
  Bây giờ chúng ta sẽ đi vào việc tạo hiệu ứng phóng to khi người dùng di chuột vào thẻ div có lớp thu phóng bằng CSS nhé

  .zoom {
     padding: 50px;
     background-color: DodgerBlue;
     transition: transform .2s;
     width: 200px;
     height: 200px;
     margin: 0 auto;
   }
   /*Hiệu ứng zoom*/
   .zoom:hover {
     transform: scale(1.5);
   }

  Các ví dụ Phóng to thu nhỏ khác nhau bằng CSS

  Hiệu ứng Zoom-In CSS

  Sau đây chúng ta sẽ xem cách tạo hiệu ứng phóng to cho hình ảnh khi người dùng di chuột qua ví dụ sau nhé

   
  Hiệu Ứng Zoom In
   
  Bạn hãy hover vào ảnh bên dưới nhé
   
  
   
  
   
  

   .noidung {
     height: 200px;
     width: 200px;
     overflow: hidden;
   }
   .zoomin img {
     height: 200px;
     width: 200px;
     -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
     -ms-transition: all 2s ease;
     transition: all 2s ease;
   }
   .zoomin img:hover {
       transform: scale(1.5);
   }

  
  Thuộc tính tràn. ẩn giấu; . Do đó, nó sẽ gây cảm giác phóng to cho người dùng mà vẫn không thay đổi độ rộng của hình ảnh

  Hiệu ứng Zoom-Out CSS

  Xem ví dụ về tạo hiệu ứng thu nhỏ bằng HTML và CSS

   
  Hiệu Ứng Zoom Out
   
  Bạn hãy hover vào ảnh bên dưới nhé
   
  
       
  
   
  

  ________số 8

  
  Ở đây mình sẽ tạo hiệu ứng thu nhỏ bằng cách thay đổi độ rộng và độ cao của hình ảnh khi người dùng di chuột

  Hiệu ứng Zoom-Rotate CSS

  Trong ví dụ này, chúng tôi sẽ kết hợp hai thuộc tính tỷ lệ và xoay để tạo hiệu ứng phóng to nhé

   
  Hiệu Ứng Zoom Rotate
   
  Bạn hãy hover vào ảnh bên dưới nhé
   
  
       
  
   
  

  0

  Hiệu ứng Zoom-Blur CSS

  Ví dụ về cách tạo hiệu ứng zoom-blur bằng cách kết hợp hai thuộc tính là tỷ lệ và bộ lọc trong CSS

  .zoom-in-zoom-out {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: green;
    animation: zoom-in-zoom-out 2s ease-out infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  0

  .zoom-in-zoom-out {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: green;
    animation: zoom-in-zoom-out 2s ease-out infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  1

  Hiệu ứng Zoom-Color CSS

  Ví dụ về cách tạo hiệu ứng zoom-color bằng HTML và CSS

  .zoom-in-zoom-out {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: green;
    animation: zoom-in-zoom-out 2s ease-out infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  2

  .zoom-in-zoom-out {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: green;
    animation: zoom-in-zoom-out 2s ease-out infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  3

  Kết luận

  Qua bài viết này hy vọng bạn đã thành công trong cách sử dụng thuộc tính biến đổi. scale(value) in CSS into your project