How to create image overlay hover slide effects using CSS ?

Last Updated : 23 Jul, 2024

In this article, we will learn how to make image overlay hover slide effects using CSS. When the users hover over the image, a smooth sliding overlay effect occurs. This technique gives a visual appeal with interactivity, making your website more interactive.

Table of Content

Full Width Slide-In Text and Image Overlay
Slide-In Text on Hover with Image Overlay

Full Width Slide-In Text and Image Overlay

In this approach, we will create a slide-in effect for text and image overlay on hover. The design is rendered as the full-width visibility of the text and image to provide a pleasing experience to the user. The transition effects add smoothness to the animation.

Make a basic structure of the project with the elements including <div>, <img>. Link the external stylesheet to the project. The CSS imports the "Poppins" font from Google Fonts for the body.
The element having the class name "overlaytext" div is initially hidden and positioned at the bottom with top: 80% and left: 40%
On hover, it expands to cover the entire box, showing an image background with a slide-up effect.
The class named "gfg" text is centered within the overlay.

Example: The example illustrates how to create image overlay hover slide effects using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to slide text on hover</h3>
    <div class="box">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104151710/1.webp" 
             alt="img">
        <div class="overlaytext">
            <div class="gfg">
                Welcome to GfG
            </div>
        </div>
    </div>
</body>

</html>

CSS

/* style.css */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    color: green;
}

.gfg {
    position: absolute;
    top: 80%;
    left: 40%;
    text-align: center;
    color: rgb(248, 248, 228);
    font-size: 25px;
    font-weight: 700;
}

.box:hover .overlaytext {
    bottom: 0;
    height: 100%;
    width: 100%;
}

.overlaytext {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .8s ease;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    background-image:
        url(
"https://media.geeksforgeeks.org/auth-dashboard-uploads/practice.png");
}

.box {
    position: relative;
    width: 50%;
    border: 5px solid rgb(180, 155, 155);
    border-radius: 20px;
}

img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

Output:

Slide-In Text on Hover with Image Overlay

In this approach, we will create an effect where text slides in from the right side and an image overlay expands on hover.

Make a basic structure of the project with the elements including <div>, <img>. Link the external stylesheet to the project. The CSS imports the "Poppins" font from Google Fonts for the body.
For Overlay Text Styling Set the position initially outside the box with right having value -100%. Apply property positioned absolute with a transition effect of 0.7s for the right property. On hover, the overlay text slides inside by changing the right property to 25%.
Style the element having class box with Position relative with a maximum width of 500pxand overflows are hidden.

Example: The example illustrates how to create image overlay hover slide effects with Slide-In Text.

HTML