Trong loạt bài viết này mình sẽ hướng dẫn các bạn làm những hiệu ứng hover với một vài thuộc tính đơn giản của css 3, nhưng chất lượng của nó không hề đơn giản :D. Ở bài viết này mình sẽ làm hiệu ứng tương tác với hình ảnh. Mình xin được bắt đầu bài viết.
Hover là gì ?
Trước tiên chúng ta cần nói về lý thuyết một tí :D, Hover là sự thay đổi của một phần tử trên màn hình mỗi khi có “con chuột” trỏ đến nó (Mouse over).
Bạn đang đọc: Tạo hiệu ứng hover đơn giản đẹp mắt bằng css 3
Hiệu ứng hover tương tác với hình ảnh
Demo: Các bạn click vào đây để xem kết quả, bây giờ mình sẽ code và giải thích ngay phía sau.
Tạo hiệu ứng hover đơn giản đẹp mắt bằng css 3
Code: html
0123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
html
Hover
href=” https://fonts.googleapis.com/css?family=Lato:300,400,700 “rel=” stylesheet “>
class=” container “>