Hướng Dẫn Tạo Hiệu ứng Phóng To Thu Nhỏ Trong CSS

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

Phóng to, thu nhỏ sử dụng thuộc tính transform: scale(giá trị) trong 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 khối phần tử 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 chiều cao thích hợp của một phần tử.

Thêm Css vào phần tử HTMLChúng ta cần sử dụng @keyframes để xác định animation

HTML

<div class="zoom-in-zoom-out"></div>

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

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); } }

Trong khi sử dụng thuộc tính transform: scale(giá trị) trong CSS thì với giá trị là:

giá trị < 1: Thu nhỏ đối tượng.giá trị = 1: Giá trị mặc định của đối tượng.giá trị > 1: Phóng to đối tượng.

Bây 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é

HTML

<h1>Hiệu ứng Zoom</h1> <p>Bạn hãy hover vào thẻ div bên dưới</p> <div class="zoom"></div>

Bây giờ chúng ta sẽ đi vào tạo hiệu ứng phóng to khi người dùng hover vào thẻ div có class zoom bằng CSS nhé!

CSS

.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 bằng CSS

Hiệu Ứng Zoom-In CSS

Sau đây chúng ta sẽ đi xem cách tạo hiệu ứng zoom-in cho hình ảnh khi người dùng hover thông qua ví dụ sau nhé:

HTML

<h3>Hiệu Ứng Zoom In</h3> <p>Bạn hãy hover vào ảnh bên dưới nhé</p> <div class="zoomin noidung"> <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597819923/y2mnobp2xxbujtf2ptsf.jpg" title="Hiệu Ứng Zoom in" /> </div>

CSS

.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 overflow: hidden; giúp ẩn đi những phần hình ảnh bị tràn ra khỏi class noidung. 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 zoom out bằng HTML và CSS.

HTML

<h3>Hiệu Ứng Zoom Out</h3> <p>Bạn hãy hover vào ảnh bên dưới nhé</p> <div class="zoomout noidung"> <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg" title="Hiệu Ứng Zoom Out" /> </div>

CSS

.noidung { height: 200px; width: 200px; overflow: hidden; } .zoomout img { height: 300px; width: 300px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomout img:hover { height: 200px; width: 200px; }

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

Hiệu Ứng Zoom-Rotate CSS

Trong ví dụ này chúng ta sẽ kết hợp hai thuộc tính scale và rotate để tạo hiệu ứng phóng to nhé.

HTML

<h3>Hiệu Ứng Zoom Rotate</h3> <p>Bạn hãy hover vào ảnh bên dưới nhé</p> <div class="zoom_rotate noidung"> <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg" title="Hiệu Ứng Zoom Out" /> </div>

CSS

.noidung { height: 200px; width: 200px; overflow: hidden; } .zoom_rotate img { height: 300px; width: 300px; transition: transform .5s ease-in-out; } .zoom_rotate img:hover { transform: scale(1.8) rotate(-30deg); }

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à scale và filter trong CSS.

HTML

<h3>Hiệu Ứng Zoom Rotate</h3> <p>Bạn hãy hover vào ảnh bên dưới nhé</p> <div class="zoom_blur noidung"> <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg" title="Hiệu Ứng Zoom Out" /> </div>

Ví dụ

.noidung { height: 200px; width: 200px; overflow: hidden; } .zoom_blur img { height: 300px; width: 300px; transition: transform 1s, filter 2s ease-in-out; filter: blur(3px); transform: scale(1.2); } .zoom_blur img:hover { filter: blur(0); transform: scale(1); } .zoom_blur img:hover { filter: blur(0); transform: scale(1); }

Hiệu Ứng Zoom-Color CSS

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

HTML

<h3>Hiệu Ứng Zoom Color</h3> <p>Bạn hãy hover vào ảnh bên dưới nhé</p> <div class="zoom_color noidung"> <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg" title="Hiệu Ứng Zoom Out" /> </div>

CSS

.noidung { height: 200px; width: 200px; overflow: hidden; } .zoom_color img { height: 300px; width: 300px; transition: transform .5s, filter 1.5s ease-in-out; filter: grayscale(100%); } .zoom_color img:hover { filter: grayscale(0); transform: scale(1.1); }

Kết luận

Qua bài này hy vọng bạn đã thành thạo cách sử dụng thuộc tính transform: scale(giá trị) trong CSS vào các dự án của mình.