Tạo hiệu ứng hover đơn giản đẹp mắt bằng css 3 phần 3

0
297

Tiếp tục với loạt bài viết hướng dẫ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. Ở bài viết này mình sẽ làm hiệu ứng tương tác với hình ảnh phần 3. Mình xin được bắt đầu bài viết.

hiệu ứng hover

Mô tả hiệu ứng

Di chuột vào từng hình ảnh thì đường viền (border) chuyển động xoay đồng thời đồng thời một khối đen có độ mờ (opacity) và nội dung text xuất hiện.

Hiệu ứng hover tương tác với hình ảnh phần 3

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.

Code: html

Code: css

Kết quả: Mình phải để một ảnh gif ở đây loại trừ trường hợp link trên codepen bị die

hiệu ứng hover

Giải thích:

  • Trước tiên chúng ta sẽ phân tích cái giao diện này. Nó gồm một khối to chứa 3 khối nhỏ, 3 khối nhỏ gồm một khối tạo đường viền tròn, một khối chứa ảnh, một khối chứa text. Tất cả đều được đặt border-radius:50% để tạo thành khối tròn.
  • Tiếp theo chúng ta sẽ css cho từng khối thôi, đặt width height, căn chỉnh bằng position, đặt màu các kiểu.
  • Tiếp đến tạo hiệu ứng hover, khi di chuột vào khối container sẽ xảy ra hiệu ứng cho khối border và khối txt. Ở hiệu ứng này mình sử dụng thuộc trính transform:rotate(180deg) để tạo chuyển động xoay cho khối border, và sử dụng transition ease-in-out để làm chậm chuyển động. Còn khối text thì đơn giản rồi, các bạn quay lại để đọc hiểu code css
  • Bây giờ tạo một khối container chứa các khối trên đặt width cho nó. Và căn giữa khối container bằng positiontransform.

Ok vậy là xong rồi đấy,  chúng ta chỉ cần sử dụng thuộc tính transform:rotate() là được rồi :D. Mình sẽ quay trờ lại với những hiệu ứng khác :D, mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
Notify of