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 Hình Ảnh Khi Hover

Tạo Hiệu Ứng Hình Ảnh Khi Hover


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

Tạo Hiệu Ứng Hình Ảnh Khi Hover

Xin chào các bạn quay lại blog của mình. Để các bạn có thể ôn lại và thực hành những gì mình đã học thì hãy cùng mình tạo hiệu ứng hover ảnh bằng HTML và CSS. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Hiệu Ứng Hover Ảnh

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc hover anh

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là tải hình ảnh mà mình để đường dẫn ở bên dưới hoặc có thể chọn tùy ý hình ảnh nào mà các bạn thích nhé!
Tải Hình ảnh

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css và Font "Open Sans" ở Google Font. Để nắm rõ hơn các bạn theo dõ đ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 Hover ảnh với nội dung</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hieu_ung">
        <div class="noi_dung">
            <img src="hinh_anh.jpg">
            <div class="phu_de">
            </div>
        </div>
    </div>
</body>
</html>

Tiếp theo việc cần làm là chúng ta sẽ cài đặt font Open Sans cho trang HTML và đưa thẻ <div class="hieu_ung"> ra giữa màn hình để giúp các bạn dễ nhìn và theo dõi hơn bằng cách chỉnh sửa file style.css. Trước khi đi vào code do có vài thuộc tính khá trừu tượng nên mình không có thời gian giải thích cặn kẽ cho các bạn hiểu nên mình sẽ để đường dẫn tham khảo thêm Tham Khảo. Bây giờ các bạn cùng xem đoạn code sau để nắm rõ hơn nhé:

body{
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    }
.hieu_ung{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:640px;
    height:400px;
    overflow: hidden;
    background:#000;
}

Thuộc tính overflow:hidden giúp chúng ta ẩn những nội dung bị tràn ra ngoài thẻ <div class="hieu_ung"> ví dụ như ở đây là hình ảnh. Bây giờ mình hãy xem kết quả nhé:

Hình Ảnh Chỉnh CSS cho hiệu ứng hover

Bây giờ chúng ta sẽ tạo một hiệu ứng nho nhỏ là khi hover vào <div class="hieu_ung"> thì hình ảnh trong nó sẽ được phóng to lên và làm mờ ảnh đi một nửa bằng thuộc tính transform và opacity. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:

.noi_dung{
    width: 100%;
    height:100%;
}
img{
    width:100%;
    transition: 0.5s;
}
.hieu_ung:hover img {
    transform: rotate(-10deg) scale(1.3);
    opacity:0.5;
}

Cùng mình xem kết quả của đoạn code trên:

Tiếp theo ta sẽ thêm một hiệu ứng tạo đường viền hình chữ nhật bao quanh chữ khi hover vào thẻ <div class="hieu_ung"> bằng .phu_de::before và .phu_de::after. Nếu các bạn có cảm thấy khó hiểu thì có thể tham khảo ở đường dẫn sau đây Tham Khảo. Để hiểu rõ các bạn xem đoạn code sau đây nhé:

.phu_de{
    position: absolute;
    top:40px;
    left:40px;
    right:40px;
    bottom:40px;
}
.phu_de::before{
    content: '';
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
    transition: 0.5s;
    transform: scale(0,1)
}
.hieu_ung:hover .phu_de:before{
    transform: scale(1,1)
}
.phu_de::after{
    content: '';
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    box-sizing: border-box;
    transition: 0.5s;
    transform: scale(1,0)
}
.hieu_ung:hover .phu_de:after{
    transform: scale(1,1)
}

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

Bước cuối cùng là chúng ta sẽ thêm phụ đề cho hình ảnh và nó chỉ hiển thị khi người ta hover vào thẻ <div class="hieu_ung">. Để hiểu rõ hơn các bạn xem đoạn code sau đây nhé:

trang_chinh.html

<div class="phu_de">
    <div class="thong_tin">
        <h2>Hãy Hover Chuột vào hình để thấy hiệu ứng</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Iste cum rem tempora, molestiae
        consequuntur cumque maiores officia sapiente possimus 
deleniti impedit cupiditate placeat
        mollitia porro minus omnis aliquid autem itaque.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit doloremque officia. Vero
        itaque voluptatibus delectus officia necessitatibus iure, 
asperiores sit sint vitae commodi
        obcaecati repellat nulla quas id voluptas?
        </p>
    </div>
</div>

style.css

.thong_tin{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index:1;
    padding:20px;
    text-align: center;
    opacity:0;
    transition: 0.5s;
}
.hieu_ung:hover .thong_tin{
    opacity: 1;
}
.thong_tin h2{
    color: #fff;
    margin:0;
    padding:0;
    font-size: 24px;
    text-transform: uppercase;
}
.thong_tin p{
    color: #fff;
    margin:20px 0 0;
    padding:0;
    font-size: 15px;
}

Đoạn code trên thì chủ yếu là chỉnh sửa lại font chữ, kích thước, màu sắc... Các bạn có thể tùy ý chỉnh sửa tùy vào sở thích mình nhé. Bây giờ chúng ta hãy xem kết quả cuối cùng nhé:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục Hieu_ung_hover để 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 các bạn có thể ôn và hiểu hơn về những gì mình đã học về HTML, CSS 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ẻ!

Load WooCommerce Stores in 249ms!