Kỹ Thuật Zoom Ảnh Khi Hover Với CSS

bởi Đinh Hoàng Bảo Chấn
0 bình luận

Kỹ thuật zoom ảnh khi hover với CSS là một kỹ thuật đơn giản và đẹp mắt mà các website WordPress & Woocommerce nên có. Mang lại sự liện tợi cho người dùng mỗi khi hover mouse đến hình ảnh cần xem. Và trong phạm vi bài này, mình sẽ hướng dẫn các bạn cách thực hiện kỹ thuật này với CSS 😀

HTML Markup

Okay vậy thì bắt đầu trước tiên thì chúng ta dựng phần HTML trước nhé ! Bố cục sẽ tương tự thế này, bạn cứ copy rồi mình sẽ giải thích sơ nhé :

Phần HTML khá đơn giản phải không 😀 Chúng ta có 1 cái div lớn với class img-container và nó chứa thẻ <img> hiển thị ảnh. Rồi vậy giờ chúng ta qua phần CSS nhé !

CSS Markup

Phía trên là toàn bộ CSS cho phần Zoom, bạn có thể copy về website của bạn, tuy nhiên có 1 số lưu ý bạn cần hiểu nhé :

  • Đối với thẻ <div> lớn chứa ảnh ( trong bài này là div có class img-container ) bắt buộc phải có thuộc tính overflow: hidden để tránh trường hợp bị vỡ giao diện nhé.
  • Chiều rộng của ảnh luôn luôn 100% để luôn rộng đầy vùng chứa nhé.
  • Các thông số còn lại hãy tùy chỉnh theo ý thích của bạn.

Như vậy là xong bài viết kỹ thuật zoom ảnh khi hover với CSS rồi đó, đây là một Kiến thức thiết kế web về CSS rất ư đơn giản quá đúng không ?! 😀

Đây là link demo của mình :

(Visited 210 times, 4 visits today)

Baì viết liên quan

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x