Hover effect on simple column

[Level4]

Hello. I am struggling to add a simple effect like this fade and apply it to a column.
fade and change color
In this case I have four columns in a row. I would like each column to fade and change color.
I am using this code and it changes the color but only when I hover over the text, not the whole column

.column1:hover {
background: #b71e00 !important;
}

How do I achieve this? Thanks

[thai]

Hi There,

Could you please provide us with your website URL which you’re working so we can take a closer look?

Thanks.

[Level4]

see secure note

[ruenel]

Hello There,

I have logged in to your site. It appears that the reason why your css does not is because you did not apply a column1 class to one of your columns. Please edit the page back in cornerstone, click the column, find the “Customize” tab and insert the column1 class in the class field.

Hope this helps.

[Level4]

Yes thank you. I had removed that for testing and you probably looked at while I was doing that. I have replaced that now.

Would you mind looking again. The problem I am having is that the box doesn’t fade to a color and is only activated when you hover over the bottom 1/2 of the box. Moving the mouse in from the top or side does not trigger the change. Only from the bottom or side 1/3.

[basanta]

Hi There,

Thanks for the clarification!
As I can see your top section Text layer overlapping the Boxes that you have created and applied the CSS.
Which is preventing the hover effect of the box.

Please decrease the bottom padding of the text panel so that it won’t overlap the Boxes.

And please use this css CSS to do a real fade effect.

.column1 {
   -webkit-transition:  .5s; /* Safari */
    transition: .5s;
}

.column1:hover {
background: #b71e00 !important;
}

You can repeat same thing for other columns.

Hope this helps.

Thanks