Hiệu ứng Hover ảnh CSS3

Hiệu ứng Hover hình ảnh giúp blog, website của bạn trở nên đẹp, ấn tượng hơn với người dùng. Vì thế hôm nay quachquynh.com mời bạn tìm hiểu một số hiệu ứng đẹp khi rê chuột vào ảnh qua bài này

1. Phóng to ảnh khi rê chuột vào

Để thực hành được bài này bạn sẽ dùng thuộc tính transform: scale();

Chạy ví dụ sau: (Thực hành trên Codepen tại đây)

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ hover ảnh</title>
<style>
img {
padding: 30px;
transform: scale(1);
transition: all 0.5s;
}
img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<img src="https://quachquynh.com/wp-content/uploads/2023/03/hieu-ung-hover-anh-1.jpg"/>
</body>
</html>

Như bạn thấy khi hover chuột lên ảnh nhờ transform: scale; nó sẽ nở ảnh ra so với kích thước ban đầu. transition: all 0.5s; chính là độ trễ của chuyển động. Khi đặt giá trị cao hơn độ trễ càng lớn.

2. Hiệu ứng Hover xoay ảnh 360 độ

img {
 -webkit-transition:all 0.5s ease-out;
 -moz-transition:all 0.5s ease-out;
 -ms-transition:all 0.5s ease-out;
 -o-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
 }
 img:hover {
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 transform:rotate(360deg);
 }

3. Làm mờ ảnh khi Hover chuột

img {
opacity: 1;
}
img:hover {
opacity: 0.5;
}

4. Hiệu ứng Hover hiện chữ Read more

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 70%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .6s ease;
  backface-visibility: hidden;
}

.readmore {
  transition: .6s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.5;
}

.container:hover .readmore {
  opacity: 1;
}

.text {
  background-color: red;
  color: white;
  font-size: 18px;
  padding: 16px 32px;
  font-weight: bold;
}
</style>
</head>
<body>

<div class="container">
  <img src="https://quachquynh.com/wp-content/uploads/2023/03/hieu-ung-hover-anh-1.jpg" class="image" style="width:100%">
  <div class="readmore">
    <div class="text">Read more</div>
  </div>
</div>
  
</body>
</html>

Kết luận: Qua một số hiệu ứng trên bạn cần lưu ý một số kiến thức như sau

Vì đây là CSS3 nên khi viết mã CSS phải thêm

-moz : hiển thị trình duyệt Firefox

-o : hiển thị tốt trên trình Opera

-webkit: hiển thị trên Google Chrome

-ms: cho Internet Explorer

Với bài viết này bạn đã biết thêm thuộc tính tranform để hover hình ảnh tạo hiệu ứng đẹp mắt rồi phải không. Sau khi đọc xong hãy thực hành ngày đi kẻo quên mất nhé! Chúc thành công!