Docs

[archerthefox]

Hey team,

I’ve used CSS to create a dark overlay on hover. I’m trying to keep the text in front of the dark overlay.

I’m using the style section to set a background image for a column. I’ve given these sections a class (column-image).

Here’s the CSS I’m using to create the dark overlay on hover:

.column-image {
    overflow: hidden;
    position: relative;
}

.column-image:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: transparent;
    transition: background-color 100ms linear;
}

.column-image:hover:after {
    transition: background-color 100ms linear;
    background-color: rgba(0,0,0,0.5);
}

What CSS should I add to keep the text infront of the overlay?

Thanks!

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts