Text & Image - Grayscale to Colour Hover

Text & Image Block - Dark Overlay to Transparent Hover

This effect helps text be more readable on Text & Image blocks whilst also havin the image more clear on hover.

How to use the Effect

Select the Text & Image block that you wish to apply the effect to, select 'Actions' from the top header of BlockLab and then select 'Custom CSS'. Copy and paste the below code into the pop up, hit save and the effect will be applied.

CSS

row .block img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
row .block:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}