Code - CSS - HTML
Thêm các CSS3 hiệu ứng khi :hover ảnh trong WordPress
Th7
Hiệu ứng khi 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 chúng tôi 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.
Hy vọng những chia sẻ về các hiệu ứng css khi hover ảnh cho wordpress của tôi sẽ giúp ích cho bạn.
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();
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ hover ảnh</title>
</head>
<body>
<img src="https://dichvuseo.website/wp-content/uploads/2024/05/mobiza-logo.png"/>
</body>
</html>
CSS:
/* CSS cho việc căn chỉnh và hiệu ứng hover của hình ảnh */
img {
padding: 30px; /* Tạo khoảng cách xung quanh hình ảnh */
transform: scale(1); /* Đặt kích thước ban đầu của hình ảnh */
transition: all 0.5s; /* Thêm hiệu ứng chuyển đổi mịn màng trong 0.5 giây */
}
img:hover {
transform: scale(1.1); /* Phóng to hình ảnh lên khi chuột hover vào */
}
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 độ
Đoạn mã trên sẽ tạo hiệu ứng quay hình ảnh 360 độ khi rê chuột vào hình ảnh.
CSS:
/* Áp dụng hiệu ứng chuyển đổi và quay hình ảnh khi hover */
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
Đoạn mã trên sẽ làm cho hình ảnh trở nên mờ đi khi di chuột qua nó.
CSS:
/* Điều chỉnh mức độ mờ của hình ảnh khi chuột hover */
img {
opacity: 1; /* Giữ hình ảnh ở mức độ rõ nét */
}
img:hover {
opacity: 0.5; /* Làm mờ hình ảnh đến mức độ 0.5 khi chuột hover vào */
}
4. Hiệu ứng Hover hiện chữ “Xem thêm”
Đoạn mã sau sẽ hiển thị một hình ảnh và khi di chuột qua container chứa hình ảnh, hình ảnh sẽ mờ đi và một nút “Xem thêm” sẽ xuất hiện giữa hình ảnh.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<img src="https://dichvuseo.website/wp-content/uploads/2024/05/mobiza-logo.png" class="image" style="width: 100%">
<div class="xemthem">
<div class="text">Xem thêm</div>
</div>
</div>
</body>
</html>
CSS:
.container {
position: relative;
width: 70%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.6s ease;
backface-visibility: hidden;
}
.xemthem {
transition: 0.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 .xemthem {
opacity: 1;
}
.text {
background-color: red;
color: white;
font-size: 18px;
padding: 16px 32px;
font-weight: bold;
}
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!
