-
Posts
-
Hi,
My goal is to have the background image of my grid row’s cell to appear dark on idle and full colour on hover, like this:
The easiest method I could think of was to set the grid row’s main background colour to black, then use opacity:0.2 on the grid cell. It worked; my background image was dark but what I didn’t realize is that the opacity property affects all child elements as well, so the column container and text block inside the cell were also quite dark – which is bad.
Is there a way of adding a background overlay to a grid row cell, similar to the overlay feature of a colour section? I figure I could just target the overlay and adjust its opacity on hover. If not, I’m open to other options as well.
Thanks!
Hey Metavrse,
You could enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
for that element and then use your overlay.
Best regards,
MikeHi Mike,
I already have the CSS fields enabled. I’m trying to figure out how to create the overlay for the grid cell.Hi,
Here is a demo and article of what you are trying to do: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.htmlBest regards,
MikeHey Mike,
Did I understand that right? I must not use a background image on the grid row column. But set the background image with the ::after pseudo element.Thanks for your help
regards martin
- You must be logged in to reply to this topic.