Trong hướng dẫn này, tôi sẽ giải thích chi tiết cách tạo hình ảnh cuộn từ trên xuống dưới khi di chuột chỉ bằng CSS.
Trước tiên tôi sẽ tạo một div và gán cho nó một lớp image-wrap hoặc bạn có thể gán cho nó bất kỳ lớp nào mà bạn nghĩ là tốt hơn. Bên trong đó tôi sẽ đặt một thẻ hoặc thẻ liên kết và sau đó tôi sẽ đặt thẻ img của mình vào trong thẻ liên kết.
<div class=”image-wrap”> <a href=”https://rahmanzeb.com”> <img src=”theme-screenshot.jpg” /> </a></div>
Sau đó, tôi sẽ áp dụng mã CSS sau để cuộn hình ảnh từ trên xuống dưới khi di chuột.
.image-wrap {
width: 300px;
height: 300px;
overflow: hidden;
margin: 50px auto;
}
.image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: all 1s ease-in-out;
}
.image-wrap:hover img {
object-position: bottom center;
}
