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!
Hướng dẫn cách tắt comment trong wordpress
Trong quá trình xây dựng và quản lý một trang web WordPress, việc tắt chức năng comment có thể là một yêu cầu phổ biến. Điều này…