Blur column background not text on rollover

[hyperdrive_boom]

Good morning,

I have a column with text in it - I would like it so when you roll over the column the background blurs but not the text.

I know you could have a effect blur on rollover but that effects the text too. I also can see you could have the background already blurred using:

.x-bg {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

but if I do this it does not work:

.x-bg {
    -webkit-filter: blur(0px);
    filter: blur(0px);
}

.x-bg:hover {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

I look forward to your thoughts

Thank you,
Jason

[ruenel]

Hello @hyperdrive_boom,

Thanks for writing in!

This is the element structure:

Section (x-section)
     Row (x-row)
          Column (x-col)
               Div (x-bg)

When you hover over the column, you want that only the background is blurred. You should be adding the :hover into your column class. Therefore, the CSS code structure will be like this:

.x-col .x-bg {
       /* some styling */
}

.x-col:hover .x-bg {
   /* some styling */
}

The code above serves as an example code. Feel free to modify it when needed. Be advised that this is beyond the scope of our support under our Support Policy. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[hyperdrive_boom]

That is perfect - thank you @ruenel!

[tristup]

Hi @hyperdrive_boom,

You are most welcome.