Change Color on Hover

Shaking The Habitual STH Support
1

I’m using the Source Grid stack and I want the Grid item to change color when I hover over it. looking for some assistance.

Thank you,
Arlen

2

Is easiest achieved by adding a little css added to the page. Are you using the regular grid stack? If so the following should work:

.s-cols-item {
    transition: background-color 0.5s ease !important; 
}
.s-cols-item:hover {
    background-color: #eee;
}

If it is with Grid Plus/Pro then switch out s-cols-item for s-grid-item.

Note too that this code this would apply to all grid items on the page. If you only want to target certain grids then add a class name to the parent grid stack (e.g. grid-hover-bg and then add that in before the CSS above. e.g.

.grid-hover-bg .s-cols-item {
    transition: background-color 0.5s ease !important; 
}
.grid-hover-bg .s-cols-item:hover {
    background-color: #eee;
}
5 Likes
3

Perfect! thank you.

I did however also have the “Raise on Hover” enabled, it appears the extra CSS added to the page made the Raising very abrupt so it’s not smooth anymore. I just turned the Raise on Hover off and enabled Box Shadow on Hover as a finishing touch and it looks great.

1 Like
4

If you tweak the css to be transition: all 0.5s ease !important; then it should retain a smooth raising effect. I’ll see if I can make an adjustment in Source in a future update to make it a bit easier to override the default/built-in setting for this.

1 Like