Horje
How to create image overlay hover slide effects using CSS ?

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

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 
<!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="styles.css">
    <title>How to slide text on hover</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to slide text on hover</h3>
    <div class="box">
        <img src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/432/Web/Content/Test%20Series%20Product%20Based_1704019692.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;
    margin: 0;
}

h1 {
    color: green;
    text-align: center;
}

h3 {
    text-align: center;
}

.gfg {
    position: absolute;
    top: 30%;
    right: -100%;
    text-align: center;
    color: rgb(248, 248, 228);
    font-size: 25px;
    font-weight: 700;
    transition: right 0.7s ease;
}

.box:hover .gfg {
    right: 25%;
}

.overlaytext {
    position: absolute;
    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/img-practice/banner/complete-interview-preparation-mobile.png?v=19395");
}

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

.box {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
}

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

Output:


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
CSS Inline-block CSS Inline-block
CSS Color Keywords CSS Color Keywords
How to create a sticky image using CSS ? How to create a sticky image using CSS ?
How to style even and odd elements using CSS ? How to style even and odd elements using CSS ?
How to combine Bold and Italic in CSS ? How to combine Bold and Italic in CSS ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje