Front Page Image Opacity on Hover Effects

This is the code that handles the overlay, so you would need to just change the overlay colour setting in the customer for it to be black. Then do this custom cSS:

.dark-overlay:hover {
    opacity: 0.4;
}

The 0.4 means 4% opacity (transparency) on hover.

hi, sorry to be a pain. I’ve changed the color to black in the customizer and pasted the code in the ‘additional css’ section but nothing happened (see image below if i did it correctly)

screenshot

• This reply was modified 7 years, 9 months ago by russtalavista.

No worries…. basically you have this:

/*
.dark-overlay:hover {
    opacity: 0.4;
}
*/

But it should be this:

.dark-overlay:hover {
    opacity: 0.4;
}

The starting /* and the ending */ is a comment, or rather what that does when it surrounds CSS code is that it comments it out and disabled it. Make sure your custom CSS is not between the /* and */

thank you. removed that and put this

.dark-overlay:hover {
opacity: 0.4;
}

but still didn’t work.

My fault…should be this:

.image-post .text-holder:hover {
    opacity: 0.4;
}

By the way, did you just make one of the opacity’s as 40?

.dark-overlay {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #beb27a;
    opacity: 40;
}

the 40 should be 0

• This reply was modified 7 years, 9 months ago by Shaped Pixels.

thanks, it worked now <3

and also I might have changed it into 40 so i turned it back to 0.

many thanks for your help ??

• This reply was modified 7 years, 9 months ago by russtalavista.

You are very welcome ??