css hover on blurb module

hi :slight_smile:

i have a css hover effect on the blurb modules that you can see on this page: http://shr.globedigitaltesting.xyz/home/

on hover, the icon goes blue, and the title goes red

i would like this effect to happen when hovering anywhere in that whole column, not only on the blurb (e.g. when going to click the button, the colours remain). hope this makes sense...

this is the custom css i have added so far:

.blurb-hover .et_pb_blurb:hover h4 {
color: #ee484c !important;
-webkit-transition-delay: .05s;
transition-delay: .05s;
-webkit-transition-duration: .55s;
transition-duration: .55s;
}

.blurb-hover .et_pb_blurb:hover .et-pb-icon {
color: #0c3c60 !important;
-webkit-transition-delay: .05s;
transition-delay: .05s;
-webkit-transition-duration: .55s;
transition-duration: .55s;
}

.blurb-hover .et_pb_column:hover {
box-shadow: 0px 0px 5px 1px rgba(55, 55, 55, 0.15);
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-transition-delay: .05s;
transition-delay: .05s;
-webkit-transition-duration: .55s;
transition-duration: .55s;
}

__________________________________________________

secondly, if I may ask for help on one other thing too with the hover css:

after you move the mouse away from the column, the colours/float etc. disappear very abruptly - i would like it to disappear as smoothly as it appears. once again hope this makes sense!

thanks in advance
Ryan