CSS Overlay – Cách sử dụng kỹ thuật Overlay trong CSS

CSS overlay là một kỹ thuật được sử dụng để đặt một đối tượng lên đỉnh của đối tượng khác trên trang web. Kỹ thuật này giúp làm cho trang web trở nên hấp dẫn và dễ thiết kế hơn. Tạo hiệu ứng overlay có nghĩa là đặt hai div chồng lên nhau, nhưng cả hai sẽ xuất hiện khi cần thiết. Để hiển thị div thứ hai, chúng ta có thể rê chuột hoặc nhấp vào div thứ nhất. Trong hai div này, một div là overlay div chứa nội dung sẽ hiển thị khi người dùng di chuột qua hình ảnh và div thứ hai là container sẽ chứa cả hình ảnh và overlay của nó.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Overlay là gì ?

CSS overlay là một trong những kỹ thuật thiết kế web phổ biến nhất hiện nay. Nó cho phép bạn tạo hiệu ứng hiển thị nội dung khi người dùng di chuột qua hình ảnh hoặc các đối tượng khác trên trang web của bạn. Các hiệu ứng overlay này giúp cho trang web của bạn trở nên hấp dẫn hơn và thu hút sự chú ý của người dùng.

Một số kiểu hiệu ứng CSS overlay phổ biến bao gồm fade overlay effect, image overlay slide, image overlay title, và image overlay icon. Mỗi kiểu hiệu ứng này có những tính năng riêng để bạn có thể tùy chỉnh theo ý muốn.

CSS overlay được sử dụng rộng rãi trong thiết kế web cho các trang web cá nhân, doanh nghiệp, blog và cửa hàng trực tuyến. Nó cung cấp một cách thức tiếp cận hiệu quả để thu hút sự chú ý của khách hàng và giúp tăng tỷ lệ chuyển đổi trên trang web của bạn.

Bất kỳ ai đang tìm kiếm một cách để thiết kế một trang web đẹp mắt, chuyên nghiệp và có tính tương tác cao đều có thể sử dụng CSS overlay trong thiết kế của mình.

Hướng Dẫn CSS Overlay

Fade Overlay Effect

Trong kiểu hiệu ứng này, khi di chuột qua hình ảnh, overlay sẽ xuất hiện trên đỉnh của hình ảnh.

Ví dụ

<div class="container">
    <img src="https://example.com/image.jpg" alt="Image">
    <div class="overlay">
        <div class="text">This is an overlay text</div>
    </div>
</div>

.container {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: # 008CBA;
}

.container:hover .overlay {
    opacity: 1;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Image Overlay Slide

Chúng ta có thể tạo hiệu ứng overlay trượt bằng bốn kiểu khác nhau là top, bottom, left và right. Sau đây là ví dụ cho từng kiểu.

Slide in Overlay from Top to Bottom

Trong hiệu ứng này, overlay sẽ trượt vào từ trên xuống dưới.

Ví Dụ

<div class="container">
    <img src="https://example.com/image.jpg" alt="Image">
    <div class="overlay-top">
        <div class="text">This is an overlay text</div>
    </div>
</div>

.container {
    position: relative;
}

.overlay-top {
    position: absolute;
    top: -100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: # 008CBA;
    transition: .5s ease;
}

.container:hover .overlay-top {
    top: 0;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Slide in Overlay from Bottom to Top

Trong hiệu ứng này, khi di chuột qua hình ảnh, overlay sẽ trượt vào từ dưới lên.

Ví Dụ

<div class="container">
    <img src="https://example.com/image.jpg" alt="Image">
    <div class="overlay-bottom">
        <div class="text">This is an overlay text</div>
    </div>
</div>

.container {
    position: relative;
}

.overlay-bottom {
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: # 008CBA;
    transition: .5s ease;
}

.container:hover .overlay-bottom {
    top: 0;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Slide in Overlay from Left to Right

Trong hiệu ứng này, khi di chuột qua hình ảnh, overlay sẽ trượt vào từ trái sang phải.

Ví Dụ

<div class="container">
    <img src="https://example.com/image.jpg" alt="Image">
    <div class="overlay-left">
        <div class="text">This is an overlay text</div>
    </div>
</div>

.container {
    position: relative;
}

.overlay-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    background-color: # 008CBA;
    transition: .5s ease;
}

.container:hover .overlay-left {
    left: 0;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Slide in Overlay from Right to Left

Trong hiệu ứng này, khi di chuột qua hình ảnh, overlay sẽ trượt vào từ phải sang trái.

Ví Dụ

<div class="container">
    <img src="https://example.com/image.jpg" alt="Image">
    <div class="overlay-right">
        <div class="text">This is an overlay text</div>
    </div>
</div>

.container {
    position: relative;
}

.overlay-right {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    right: 0;
    background-color: # 008CBA;
    transition: .5s ease;
}

.container:hover .overlay-right {
    left: 0;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Lời Khuyên CSS Overlay

Khi sử dụng hiệu ứng overlay trong thiết kế trang web, hãy cân nhắc về mục đích sử dụng của nó và tối ưu hóa hiệu ứng để giảm thiểu tác động đến tốc độ tải trang web. Bạn cũng nên chọn các hiệu ứng phù hợp với nội dung trang web của bạn và không sử dụng quá nhiều hiệu ứng trên một trang để tránh gây nhầm lẫn cho người dùng.

Ngoài ra, bạn cũng có thể sử dụng các công cụ và thư viện CSS overlay sẵn có để tiết kiệm thời gian và tối ưu hóa mã CSS của bạn.