Làm thế nào để có thể cuộn ảnh khi hover chuột trên website với html css. Một câu hỏi rất nhiều người quan tâm nhất là những người thường làm việc với những bức ảnh dài miên man và muốn đưa lên web cho người dùng xem.
Một khó khăn vì nó dài quá nên nó thực sự gây ra trải nghiểm không tốt khi đưa full kích thường lên web. Sáng nay Anh Ngọc (một học viên của tôi trên https://unitop.vn) đang phát triển một dự án bán website và muốn đưa bản thiết kế lên cho mọi người xem.
Khi nhận được câu hỏi đó tôi đã tư duy và sau một khoảng thời gian ngắn đã làm được chức năng đó. Ngẫm lại tôi thấy cái này khá là hay vậy nên tôi dành thời gian buổi chiều làm ngay để tạo video cho các bạn xem và phát triển.
Quá trình theo dõi video bạn nên xem qua một lượt để nắm tư duy sau đó mới bắt tay vào code để đạt hiệu quả tốt nhất. Chúc bạn sớm ra nghề!
Video hướng dẫn Scroll ảnh khi hover trong css
Tải hình ảnh demo để thực hành tại đây: https://photos.app.goo.gl/1XCyQMAnJ4dcgbEA9
Sau khi bạn theo dõi video xong bạn nhớ hãy quan sát cách tôi tư duy đó mới là thứ quan trọng nhất và tiếp theo hãy tự code lại.
Cuối cùng để kiểm tra lại code của mình bạn có thể theo dõi chi tiết hơn ở bên dưới nhé…
Full code hướng dẫn… bằng html css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiệu ứng hover cuộn ảnh css - unitop.vn</title>
</head>
<body>
<style>
#wrapper{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
h1{
flex-basis: 100%;
text-align: center;
}
.box{
width: 400px;
height: 600px;
background: chocolate;
overflow: hidden;
box-shadow: 2px 2px 5px #888;
position: relative;
}
.box img{
max-width: 100%;
position: absolute;
bottom: -1235px;
transition: bottom 3.5s ease-in-out;
/* // K => 0 */
}
.box:hover img{
bottom: 0px;
cursor: pointer;
}
</style>
<div id="wrapper">
<h1>Hiệu ứng hover cuộn ảnh css - unitop.vn</h1>
<div class="box">
<img src="images/w-1.jpg" alt="">
</div>
</div>
</body>
</html>
Nếu quá trình theo dõi bạn đang mông lung chưa hiểu hết những điều tôi nói trong video thì rất có thể bạn chưa có kiến thức nền tảng.
Thay vì bạn học html css không định hướng có thể mất đến vài năm giờ đây bạn có thể chỉ cần 21-35 ngày tập trung (2-3h mỗi ngày) là làm chủ được bộ kỹ năng này. Bên dưới là lộ trình tôi đã chia sẻ trong chương trình HTML CSS 21 Ngày bạn có thể tham khảo.
Chúc bạn học tốt, có bất kỳ câu hỏi nào bạn để lại comment tôi sẽ phản hồi và hỗ trợ bạn!
Phan Văn Cương – Unitop.vn
