Hiệu ứng Phóng To Hình ảnh Khi Rê Chuột Lên Hình ảnh | Gextend

Trang chủ » Hiệu ứng Zoom ảnh Css3 » Hiệu ứng Phóng To Hình ảnh Khi Rê Chuột Lên Hình ảnh | Gextend

Có thể bạn quan tâm

Gextend
  • Home
  • Forums New posts Search forums
  • Resources Latest reviews Search resources
  • Members Current visitors New profile posts Search profile posts
  • What's new Featured content New posts New resources New profile posts Latest activity
Log in Register What's new Search

Search

Everywhere Threads This forum This thread Search titles only Note By: Search Advanced search…
  • New posts
  • Search forums
Menu Log in Register Install the app Install How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

  • Home
  • Forums
  • Discussion
  • Web
  • HTML & CSS
You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. ShareHiệu ứng phóng to hình ảnh khi rê chuột lên hình ảnh
  • Thread starter Thread starter filiallion
  • Start date Start date 04/04/2018
  • Tags Tags css css3 hover image zoom
filiallion

filiallion

Administrator
Staff member Administrator Messages 585 Points 10 Language Tiếng Việt Chức năng phóng to hình ảnh khi các bạn rê chuột lên hình ảnh là một trong những hiệu ứng thường thấy hiện nay trên các website, nhất là các website dạng tin tức hoặc blog. Đây là một hiệu ứng chuyển động đẹp, bắt mắt giúp người dùng cảm thấy thú vị khi xem website. Chức năng này sử dụng các thuộc tính 2D transform có trong CSS3 dùng để xử lý hiệu ứng di chuyển 2D, ví dụ các bạn có thể phóng to, thu nhỏ khi rê chuột vào một phần tử HTML nào đó. Việc thiết kế chức năng này với HTML và CSS3 là rất đơn giản, các bạn tham khảo một vài dòng lệnh đơn giản mà tôi hướng dẫn sau đây là có thể hoàn thành hiệu ứng này để áp dụng vào website của các bạn rồi. Nội dung mã lệnh HTML: HTML: <div class="thumbnail"> <img src="path/to/image.jpg"> </div> Nội dung mã lệnh CSS: CSS: .thumbnail { width: 500px; height: 300px; overflow: hidden; border: 1px solid #e5e5e5; } .thumbnail img { width: 100%; height: 100%; transition-duration: 0.3s; } .thumbnail img:hover { transform: scale(1.2); } You must log in or register to reply here. Share: Facebook X (Twitter) LinkedIn Reddit Pinterest Tumblr WhatsApp Email Share Link
  • Home
  • Forums
  • Discussion
  • Web
  • HTML & CSS
Back Top

Từ khóa » Hiệu ứng Zoom ảnh Css3