- CSS cơ bản
- CSS là gì? Hướng dẫn cách học CSS hiệu quả
- Thẻ DIV trong HTML là gì?
- Tìm hiểu thẻ SPAN trong HTML
- Thuộc tính Float và Clear trong CSS
- Chia cột trong HTML và CSS
- Thiết kế website bằng HTML và CSS đơn giản
- Thuộc tính Display trong CSS [inline block]
- CSS nâng cao
- Thuộc tính Display Flex trong Css
- CSS Grid Layout và cách sử dụng
- @keyframes trong CSS3
- Hiệu ứng Animation trong CSS3
- Thuộc tính Transform trong Css3
- Sử dụng @Media trong CSS để tạo Responsive
- Hướng dẫn sử dụng Before và After trong CSS
- Hiệu ứng Animation trong CSS3
- Home
- Web Development
- HTML & CSS
- Hiệu ứng Hover ảnh CSS3
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]
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 độ
3. Làm mờ ảnh khi Hover chuột
4. Hiệu ứng Hover hiện chữ Read more
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ùng chủ đề
- Cách tạo menu dọc đa cấp bằng CSS
- 8 Cách viết CSS chuẩn, dễ đọc và tối ưu
- Hiệu ứng rê chuột trong CSS
- First-child, last-child, nth-child trong CSS
- Thuộc tính Display Flex trong Css
- Hiệu ứng Animation trong CSS3
- Thuộc tính z-index trong CSS
- Thuộc tính Line-height trong CSS
- Thuộc tính Text-Transform trong CSS
- Viết chữ đè lên ảnh trong HTML
- Học CSS
- HTML & CSS
Tags: Học CSS
Bình luận! Hủy
Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *
Bình luận
Tên *
Email *
Trang web
Δ
Đọc thêm
Canh giữa theo chiều dọc CSS
Khi làm web bạn sẽ cần canh giữa các phần tử theo chiều ngang hoặc dọc [Vertical Centering]. Với chiều ngang thì có thể dùng Flexbox với juscontent: center hoặc margin: 0 auto hay text-align:
Thuộc tính box-sizing trong CSS
Một thuộc tính có lẽ ít được mọi người quan tâm trong CSS đó là Box-sizing. Trước đây khi tìm hiểu về CSS thì nó không được chú ý lắm. Nhưng mãi về sau khi
CSS là gì? Hướng dẫn cách học CSS hiệu quả
Khi nói về lập trình web không thể không nhắc đến HTML và CSS. Đây là 2 ngôn ngữ căn bản dành cho những người mới bắt đầu làm quen về thiết kế website. Bạn
Thuộc tính Margin và Padding trong CSS
Khi viết code CSS bạn sẽ gặp phải hai thuộc tính thường dùng nhất đó là thẻ margin và padding. Đối với người mới học thường hay sử dụng nhầm lẫn giữa chúng. Vậy làm
Thuộc tính Line-height trong CSS
Line-height trong CSS là một thuộc tính thường được sử dụng. Nó giúp chúng ta trình bày văn bản đẹp mắt và dễ đọc hơn. Bài viết này bạn sẽ được tìm hiểu về thuộc
Hàm var[] trong CSS
Khi viết mã CSS bạn sẽ thấy rằng các giá trị được lặp đi lặp lại khá nhiều. Điều này thực sự không tốt về mặt tốc độ. Chính vì vậy CSS3 đã được bổ