How to Create Image Overlay Hover Slide Effects

Image overlay hover effects can add an extra layer of interaction to your website, making it more engaging and interactive for users.

In this tutorial, we’ll explore how to create image overlay hover slide effects with CSS and JavaScript.

By the end of this tutorial, you’ll have a better understanding of how to implement this effect on your own website.

CSS

First, let’s start with the CSS. We’ll use CSS to create the overlay and style it.

To create the overlay, we’ll use the ::before pseudo-element.

This pseudo-element allows us to insert content before the content of an element. In this case, we’ll insert the overlay before the image.

Here’s the CSS code for the overlay:

.image-container {
position: relative;
}

.image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
opacity: 0;
}

The .image-container class sets the position of the element to relative.

The ::before pseudo-element sets the content to an empty string and displays it as a block element.

The position is set to absolute, which means it’s positioned relative to its closest positioned ancestor.

The top, right, bottom, and left properties are set to 0, which means the overlay will cover the entire image.

The background-color is set to a semi-transparent black, and the transition property sets a smooth transition for the opacity property when it changes.

The opacity property is set to 0, which means the overlay is not visible initially.

JavaScript

Next, we’ll use JavaScript to show and hide the overlay when the mouse hovers over the image.

To do this, we’ll add an event listener to the image container that listens for the mouseenter and mouseleave events.

When the mouse enters the image container, we’ll use the .style.opacity property to change the opacity of the overlay to 1, making it visible.

When the mouse leaves the image container, we’ll change the opacity back to 0, hiding the overlay.

Here’s the JavaScript code:

const imageContainers = document.querySelectorAll(".image-container");

imageContainers.forEach(imageContainer => {
imageContainer.addEventListener("mouseenter", () => {
imageContainer.querySelector("::before").style.opacity = 1;
});
imageContainer.addEventListener("mouseleave", () => {
imageContainer.querySelector("::before").style.opacity = 0;
});
});

In the code above, we use the querySelectorAll method to select all elements with the .image-container class and store them in the imageContainers constant.

Then, we use the forEach method to loop through each image container and add an event listener for the mouseenter and mouseleave events.

When the mouse enters the image container, we use the querySelector method to select the ::before pseudo-element and change its opacity to 1.

When the mouse leaves the image container, we change the opacity back to 0.