Hướng dẫn image zoom css - phóng to hình ảnh css

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é!

Cách Tạo Hiệu Ứng Zoom CSS

Để tạo hiệu ứng zoom cho các thành phần trong trang web thì chúng ta sẽ sử dụng thuộc tí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);
 }

• 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 cơ bản cho trang web nhé!

HTML

 
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 tạo hiệu ứng phóng to khi người dùng hover vào thẻ div có class

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

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

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen Tao hieu ung zoom hover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Hiệu Ứng Zoom-In CSS

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom-in cho hình ảnh khi người dùng hover thông qua đoạn mã sau nhé:

HTML

 
Hiệu Ứng Zoom In

 
Bạn hãy hover vào ảnh bên dưới nhé

 

 

 

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

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen Tao hieu ung zoom hover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Cách Tạo Hiệu Ứng Zoom-In CSS

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng zoom-in cho hình ảnh khi người dùng hover thông qua đoạn mã sau nhé:

Và kết quả cuối cùng bạn xem dưới đây nhé!

HTML

 
 
Hiệu Ứng Zoom Out

 
Bạn hãy hover vào ảnh bên dưới nhé