Image hover overlay with CSS?

[Lorenz]

Hi,
i already read some posts about adding a white overlay to an image on hover.

It was recommended to download the plugin Essential Grid, however i think in my case it may be better and easier to solve this problem with CSS.

This is my Website: https://nudelmaschine-chefkoch.de/ , i want to make the changes on the 3 rounded images right on top.

I dont need any text To appear on Hover, just a slight collored overlay. Is this really not achievable through CSS?

Thanks in advance!

[jade]

Hi there,

Yes you can achieve this through some CSS.

First, please add a class to the images. You can do this when you click on the customize option of the image element.

Once you added a class to the image, please add this code in the Global CSS assuming that the class you added to the image elements is with-overlay:

.with-overlay {
    position:  relative;
}

.with-overlay:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    transition: opacity 0.4s ease;
    opacity: 0;
}

.with-overlay:hover:after {
    opacity: 1;
}

Please note that since this is a custom code, it is possible that it might not work if you change something in your setup and you will have to update the code accordingly as it goes beyond the scope of our support.

Hope this helps.

[Lorenz]

Now thats a smooth transition, thanks Jade!

I added a border radius and it works like a charm.

If it stops working i might find another solution, but for now this is perfect

[basanta]

we are glad that it works for you!

Thanks