Learn How to Create Image Overlay Hover Slide Effects with HTML and CSS

Solution with Code:

Here is a solution demonstrating how to create an image overlay slide-in effect on hover using only HTML and CSS.

1. HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="Learn How to Create Image Overlay Hover Slide Effects with HTML and CSS">
    <meta name="description" content="Master the art of creating hover slide effects with image overlays. This tutorial demonstrates how to slide an overlay from the top of an image when hovered, using only HTML and CSS.">
    <meta name="keywords" content="Image Overlay Hover Effects, Hover Slide Effect, CSS Overlay, CSS Animations, Image Effects, Web Design, Hover Animations, CSS Effects, Interactive Design, HTML and CSS">
    <title>Image Overlay Hover Slide Effects</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h2>Slide-in Overlay from the Top</h2>
    <p>Hover over the image to see the effect.</p>

    <div class="container">
        <img src="img_avatar.png" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>

</body>
</html>

2. CSS (styles.css):

/* Basic reset for margins and padding */
body, h2, p {
    margin: 0;
    padding: 0;
}

/* Styling the heading */
h2 {
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
}

p {
    text-align: center;
    margin-bottom: 20px;
}

/* Container for the image */
.container {
    position: relative;
    width: 50%; /* Adjust size of the image container */
    margin: auto;
}

/* The image itself */
.image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px; /* Optional: for rounded corners */
}

/* The overlay effect */
.overlay {
    position: absolute;
    bottom: 100%; /* Initially position the overlay outside the image */
    left: 0;
    right: 0;
    background-color: rgba(0, 140, 186, 0.8); /* Semi-transparent background */
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: height 0.5s ease; /* Smooth sliding effect */
    border-radius: 10px; /* Match the rounded corners of the image */
}

/* The text inside the overlay */
.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text */
    text-align: center;
}

/* Hover effect to slide the overlay into view */
.container:hover .overlay {
    bottom: 0;
    height: 100%; /* Make the overlay visible */
}

Explanation:

1. HTML Structure (index.html):

The .container div wraps the image (img) and the overlay (.overlay).
The img tag displays the image, and the .overlay div contains the content (the text “Hello World”).
When the user hovers over the .container (which includes the image and the overlay), the overlay slides in from the top to cover the image with the content.

2. CSS (styles.css):

Container (.container):
- The position: relative; style ensures that the .overlay can be positioned absolutely inside the container, relative to it.
- The width: 50%; defines the size of the image container and margin: auto; centers the container horizontally on the page.
Image (.image):
- The image is displayed as a block-level element and takes up 100% of the width of the container while maintaining its aspect ratio (height: auto;).
- border-radius: 10px; is optional but can be used to round the corners of the image.
Overlay (.overlay):
- The .overlay is initially positioned outside of the image (with bottom: 100%;), and its height is set to 0 to hide it.
- The background color is a semi-transparent blue (rgba(0, 140, 186, 0.8)), and the overlay has rounded corners that match the image.
- The transition: height 0.5s ease; ensures a smooth sliding effect when the height of the overlay changes.
Text Inside the Overlay (.text):
- The text is absolutely positioned in the center of the overlay using top: 50%; left: 50%; combined with transform: translate(-50%, -50%); to ensure it stays centered.
Hover Effect (.container:hover .overlay):
- When the .container is hovered, the .overlay moves to the bottom of the image (bottom: 0;) and expands to cover the entire image (height: 100%;), revealing the text inside.

3. Result:

The overlay is initially hidden outside the image.
When the user hovers over the .container, the overlay slides down into view, covering the image with a semi-transparent background and displaying the centered text (“Hello World”).

Learn How to Create Image Overlay Hover Slide Effects with HTML and CSS

Solution with Code:

1. HTML (index.html):

2. CSS (styles.css):

Explanation:

1. HTML Structure (index.html):

2. CSS (styles.css):

3. Result:

Leave a Reply Cancel reply