Target column background image CSS only

[azzacoward]

Hi there,

I am trying to add a hover effect to a columns background image. I have a button on top of the column but that goes dark as well.

I just want to target the actual image of the column, not everything contained in it via css.

Please help!!!

[ruenel]

Hello @azzacoward,

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.

Regards.

[azzacoward]

hi @RueNel
https://www.dev.flexi-hex.com/home-2/

It’s the little third column under the full screen video. I need to get the background image to go dark on hover but not the button on top.

Cheers

[ruenel]

Hello @azzacoward,

Please update your custom css code and use this instead:

.x-column.x-sm.x-1-3 .x-bg{
    opacity:1;
    background-color:#666;
    margin:10px;
}

.x-column.x-sm.x-1-3:hover .x-bg{
    background-color:#666;
    -webkit-filter:brightness(50%);
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}

Hope this helps. Kindly let us know.

[azzacoward]

It worked perfectly.
Thank you!

Could I be cheeky and ask a couple of questions regarding this?

1. How do I maintain the background of the column to be square at all times?
2. How would I keep the button central to the square?

I’ll have a play around but you guys can probably answer this is no time at all.

Thanks in advance!

[rad]

Hi @azzacoward,

For your two questions, please update your button CSS to this

.prod-btn {
    margin-top: calc(50% - 47px);
    margin-bottom: calc(50% - 47px);
}

That should make it square while it centered the button vertically.

Thanks!

[azzacoward]

hey @Rad and @RueNel

This worked brilliantly.

Thanks for your help guys.

[nabeel]

Glad we could help.

Cheers!