Mục Lục
Thêm các hiệu ứng hover ảnh CSS3 cho wordpress
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 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ề Thêm các hiệu ứng hover ảnh CSS3 cho wordpress của chúng 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();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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></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 độ
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
|
1
2
3
4
5
6
|
img {opacity: 1;}img:hover {opacity: 0.5;} |
4. Hiệu ứng Hover hiện chữ Read more
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!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://natafu.vn/wp-content/uploads/2020/07/logo-cty-natafu.png" 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!
*** Có thể bạn quan tâm: Cách kết nối dữ liệu từ form liên hệ với google sheet trên bảng tính
