Creative Columns 4 Question

[nathandutoit]

How can I add a hover effect to this template that fades the color overlay (currently light blue) to another color on mouse over?

Staging site: https://5mf.b42.myftpupload.com/

Thanks!

[tristup]

Hi @nathandutoit

Thanks for reaching out.
If you are referring to the section with 4 Column started with SHOREBASED SERVICES, the color has been set as background color to the Upper Layer of the Column. I would suggest you change the color according to your need. Please find the screenshot explaining the attribute and settings.

Hope it helps.
Thanks

[nathandutoit]

@tristup I am familiar with editing the layers but the client has requested that the upper layer fade to green (#0f936c) on hover. I can’t seem to figure out the css for this. Can you provide?

Thanks!

[kory]

Hey, @nathandutoit…as @tristup mentioned, you will need to apply some custom CSS to make this work. This would fall into custom development territory so you would need to implement / troubleshoot this on your own, but the following should help point you in the right direction:

.some-class-to-target-on-your-row .x-col:hover .x-bg-layer-upper-color {
  background-color: #0f936c !important;
}

I would recommend adding a class to your Row surrounding all the content so that this customization is siloed, and then you will need to target any Column when hovering over it (.x-col:hover), and then finally it’s “upper layer” of the advanced background, as that is where your color is set. You will need to use !important on that selector to overwrite the inline style set on the markup itself. Finally, if you need to setup any sort of transitions, you an do that as well with some slightly different selectors.

Hopefully this helps to point you in the right direction, cheers!