Archived topic

hover on image

3 replies · Started by Katharina on November 8, 2019

Viewing posts 1–4 of 4

November 8, 2019 at 8:12 pm #1057501

I created a bar in as a hook with images that lead to new pages. I was able to link the images but I would like to add a overlay when hovering over the image.

https://test.katisiemens.com/de/energie-booster-einleitung/

Thanks
Kati

November 9, 2019 at 6:31 am #1057660

Hi there

is this just a color overlay?

November 9, 2019 at 9:26 pm #1058264

yes just a overlay, maybe light grey or so.

November 10, 2019 at 4:03 am #1058389

Try this CSS:

.custom-video-container a img {
    vertical-align: middle;
}

.custom-video-container a {
    position: relative;
}

.custom-video-container a:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc; /* Change color */
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.custom-video-container a:hover:after {
    opacity: 0.5; /* Change transparency */
}

This archived topic is closed to new replies.

Start building better websites today.