Tạo hiệu ứng cuộn ảnh khi hover với html css

Hover scroll ảnh trong css

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

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Gỡ triệt để phần mềm Visual Studio Code

Gỡ triệt để phần mềm VSC 1. Mở thư mục cài đặt VSC C:\Users\Name\AppData\Local\Programs\Microsoft VS CodeClick uninstoo.exe để gỡ phần mềm 2. Xoá thư mục

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x