Trong bài nay mình sẽ hướng dẫn bạn hiệu ứng rê chuột trong css, hiệu ứng rê chuột vào ảnh. Khi rê chuột vào ảnh sẽ phóng to lên. Và hiệu ứng khi rê chuột vào sẽ chuyển sang ảnh khác. Bài viết này nằm trong chuyên mục WordPress Development. Để thực hiện được hiệu ứng rê chuột vào ảnh bạn dùng đến HTML và css.

Hiệu ứng rê chuột trong css – hiệu ứng zoom ảnh khi rê chuột vào

Để thực hiện hiệu ứng này đầu tiên bạn cần dùng thẻ html để tạo ra một box chứa ảnh bên trong. Bạn thực hiện theo code HTML và CSS như bên dưới:

Code HTML:

<a class="csw-media" href="#">
   <img src="link_anh" alt="alt-anh">
</a>

Code Css:

.csw-media {
  overflow: hidden;
  display: inline-block;
}
.csw-media img {
  transition: 0.8s;
}
.csw-media:hover img {
  transform: scale(1.2, 1.2);
}

Trong code HTML src bạn thay bằng link ảnh của mình đúng để nó hiển thị ảnh ra nhé. Alt là thuộc tính hiển thị chữ khi ảnh đó không tồn tại tốt cho SEO.

Trong code Css:

• trong thẻ a bạn dùng overflow hidden để khi hover vào ảnh to ra nó không bị tràn ra ngoài. overflow hidden nghĩa là những vùng bên ngoài nó sẽ bị ẩn đi.
• Trong thẻ img dùng thuộc tính transition là thời gian hoàn thành hiệu ứng. Bạn có thể thay đổi nhanh chậm theo ý mình.
• Trong thẻ img khi hover dùng thuộc tính transform sacle nghĩa là thay đổi kích thước theo chiều ngang tăng lên 1,2 tăng kích thước theo chiều dọc 1,2.

Hiệu ứng rê chuột trong css – hiệu ứng thay đổi ảnh khi rê chuột vào

Bạn tham khảo bài viết sau trên stackoverflow. Code html mẫu trên stackoverflow:

<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />

Code để bạn dễ nhìn hơn:

<img src="link-ảnh-ban-đầu" onmouseover="this.src='link-ảnh-thay-đổi'" onmouseout="this.src='link-ảnh-ban-đầu'" />

Bạn chỉ cần thay link ảnh ban đầu và link ảnh thay đổi khi rê chuột vào là xong.

• onmouseover: nó thực hiện thay đổi src của ảnh khi bạn rê chuột vào ảnh.
• onmouseout: nó thực hiện hành động thay đổi src của ảnh khi bạn rê chuột ra khỏi ảnh

Kết Luận

Qua bài viết trên Chuẩn Seo Web đã hướng dẫn bạn Hiệu ứng rê chuột trong css, hiệu ứng rê chuột vào ảnh, hiệu ứng zoom và hiệu ứng thay đổi ảnh. Nếu bạn có thắc mắc gì vui lòng để lại binh luận bên dưới. Cám ơn bạn đã quan tâm bài viết.