Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Hover Card CSS

Tạo Hiệu Ứng Hover Card CSS


Ngày 23 Tháng 2 Năm 2020

Tạo Hiệu Ứng Hover Card CSS

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách tạo hiệu ứng hover Card CSS để chúng ta có thể ôn lại kiến thức cũng như bổ sung thêm vào bộ sưu tập hiệu ứng HTML, CSS. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Hover Card CSS HTML

Trước tiên hãy xem hiệu ứng sau khi được hoàn thành đã nhé. Để các bạn có hình dung rồi sau đó mình mới đi vào chi tiết tạo hiệu ứng này:

Sau khi đã xem xong chúng ta hãy đi vào bước thứ nhất là tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư MụcHover Card CSS

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp các bạn không cần phải mất thời gian để tạo các file HTML, CSS và hình ảnh.
Tải File Hover Card CSS

Bây giờ mình sẽ tạo cấu trúc file HTML cho trang_chinh.html sau đó liên kết nó với file style.css và Google Font để dễ hiệu chỉnh và thiết lập font cho trang. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> của một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõi đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiệu ứng CSS card hover</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Tiếp theo chúng ta sẽ thêm các thẻ HTML cần thiết trong thẻ <body> cho trang_chinh.html để tạo hiệu ứng Hover Crad và đồng thời giúp các bạn có thể nắm được sườn của trang HTML để thuận tiện cho việc tinh chỉnh CSS ở các bước sau.Một lưu ý nhỏ là các bạn có thể tạo ra các văn bản tự động mà không cần phải đánh chữ mất thời gian của các bạn ở trang web: Lipsum. Để dễ hình dung cùng xem đoạn code dưới đây với mình nhé:

<div class="hieu_ung">
    <div class="noi_dung">
        <div class="hinh_anh">
            <img src="hinh_1.jpg">
        </div>
        <div class="van_ban">
            <h3>Nội dung 1</h3>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Ex rem adipisci nulla nisi harum dolores itaque ad ullam 
nihil officia! Commodi omnis beatae dolorum explicabo quod, 
repellat corrupti fugit fuga.</p>
        </div>
    </div>
    <div class="noi_dung">
        <div class="hinh_anh">
            <img src="hinh_2.jpg">
        </div>
        <div class="van_ban">
            <h3>Nội dung 2</h3>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Ex rem adipisci nulla nisi harum dolores itaque ad ullam 
nihil officia! Commodi omnis beatae dolorum explicabo quod, 
repellat corrupti fugit fuga.</p>
        </div>
    </div>
    <div class="noi_dung">
        <div class="hinh_anh">
            <img src="hinh_3.jpg">
        </div>
        <div class="van_ban">
            <h3>Nội dung 3</h3>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Ex rem adipisci nulla nisi harum dolores itaque ad ullam 
nihil officia! Commodi omnis beatae dolorum explicabo quod, 
repellat corrupti fugit fuga.</p>
        </div>
    </div>
</div>

Và chúng mình cùng xem kết quả nhé:

Ảnh Hiệu ứng fullscreen slider phiên bản HTML

Bây giờ chúng ta sẽ chỉnh CSS cho thẻ <body>, <hieu_ung><.noi_dung>. Bằng cách thiết lập màu nền kích cỡ, font chữ và đặt các card của chúng ta ra giữa màn hình để cho người dùng dễ theo dõi còn nếu các bạn muốn áp dụng trong một phần web của mình thì không cần thiết lập thuộc tính này nhé. Bước tiếp theo là chỉnh độ rộng, độ cao,màu nền... cho các thẻ <hieu_ung><.noi_dung> Ở đây mình cũng có lưu ý nhỏ về flexbox, nó là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Các bạn có thể tham khảo và tìm hiểu thêm thuộc tính này ở trang anh Thạch Phạm Tham Khảo. Để nắm rõ hơn cùng mình xem đoạn code dưới đây nhé:

body{
    margin:0;
    padding:0;
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    background: #003e46;
    font-family: 'Roboto';
}
.hieu_ung{
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.noi_dung{
    position: relative;
    width: 300px;
    height: 400px;
    background:#000;
    box-shadow: 0 30px 30px rgba(0,0,0,0.5)
}

Và đây là kết quả của đoạn code trên:

Ảnh Hiệu ứng Hover Card CSS

Vấn đề của chúng ta là hình ảnh quá rộng làm nó lấn sang các thẻ khác, để chỉnh sửa nó mình sẽ dùng thuộc tính object-fit: cover; giúp hình ảnh luôn căn giữa mà không bị vỡ ảnh hay bị nén ảnh dù thay đổi độ rộng và độ cao và thêm một vài thuộc tính CSS cho <hinh_anh>, <img>. Bây giờ để dễ hình dung các bạn xem đoạn code sau nhé:

.noi_dung .hinh_anh {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.noi_dung .hinh_anh img {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

Và đây là kết quả của đoạn code trên:

Ảnh Hiệu ứng Hover Card CSSa

Tiếp theo chúng ta sẽ thiết lập để hiển thị văn bản mà mình mong muốn với một hiệu ứng nho nhỏ là khi ta hover vào thẻ <.noi_dung> thì văn bản sẽ tràn ra hết thẻ cha của nó thông qua thuộc tính là width:100%; height:100%. Nghe hơi khó hiểu nhưng các bạn cùng mình xem đoạn code dưới đây để nằm rõ hơn nhé:

.noi_dung .van_ban{
    position: absolute;
    bottom: 20px;
    left: 10%;
    width: 80%;
    height: 60px;
    background: #fff;
    transition: 0.5s;
    overflow: hidden;
    border-radius: 30px;
    padding: 15px;
    box-sizing: border-box;
}
.noi_dung:hover .van_ban {
    width:100%;
    height: 100%;
    bottom: 0;
    left: 0;
    opacity: 1;
}

Và các bạn xem kết quả dưới đây nhé:

Một vấn đề là chữ tiêu để của văn bản như chữ Nội dung 1, Nội dung 2, Nội dung 3 thì vị trí chưa được đẹp cho lắm và các bạn để ý là khi chúng ta hover thì văn bản không tràn ra hết ở bốn góc của card . Bây giờ mình sẽ chỉnh sửa CSS cho các thẻ <h3>, <p>, <noi_dung>. Để nắm rõ hơn các bạn xem đoạn code sau đây nhé:

.noi_dung .van_ban h3 {
    margin:0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
.noi_dung .van_ban p {
    margin: 10px 0 0;
    padding: 0;
    opacity: 0;
    line-height: 2em;
}
.noi_dung:hover .van_ban p {
    opacity: 1;
}
.noi_dung:hover {
    border-radius: 30px;
}

Và các bạn xem kết quả dưới đây nhé:

Theo mình thấy thì nếu mà hiển thị hình ảnh nền nằm dưới văn bản thì sẽ đẹp hơn so với màu nền trắng thông thường. Nếu các bạn thấy không thích thì có thể chỉnh sửa tùy ý nhé vì bước trên là đã hoàn thành hiệu ứng rồi. Bây giờ chúng ta sẽ đi vào thiết lập ảnh nền cho các card bằng cách gọi .noi_dung:nth-child(Vị Trí Thẻ):hover. Lưu ý là các bạn sẽ lấy ảnh nền sao cho khớp với ảnh của thẻ card đó để tạo được sự đồng nhất nhé. Nào cùng mình xem đoạn code dưới đây:

.noi_dung:nth-child(1):hover .van_ban {
    width:100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image:linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)),  url('hinh_1.jpg');
    background-size: cover;
    color:#fff;
    opacity: 1;
}
.noi_dung:nth-child(2):hover .van_ban {
    width:100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url('hinh_2.jpg');
    background-size: cover;
    color:#fff;
    opacity: 1;
}
.noi_dung:nth-child(3):hover .van_ban {
    width:100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image:  linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url('hinh_3.jpg');
    background-size: cover;
    color:#fff;
    opacity: 1;
    font-weight: bold;
}

background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url('hinh_anh.jpg') sẽ làm mờ ảnh và tạo sự tương phản giữa hình ảnh và văn bản giúp người dùng có thể dễ thấy được chữ hơn trên nền ảnh. Các bạn xem kết quả dưới đây nhé:

Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục Hieu_ung_hover_card để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn ôn lại kiến thức, vận dụng hiệu quả trong thực tiễn và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!