How to add a coloured hover card effect to Pootle Pagebuilder content blocks with this simple css trick

Here’s a really nice effect that you can achieve with a little css.
Hover over the content blocks below to see it working. 

Hover over me

Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate. Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate.

.

Hover over me

Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate. Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate.

.

Hover over me

Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate.

.

Hover over me

Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate.

.

Hover over me

Proin leo officiis accusantium molestiae! Non interdum? Consectetuer cupidatat venenatis sociis accusantium? Mus venenatis porttitor ad nihil excepturi sociosqu penatibus, felis non sodales porta voluptate.

.

And here’s how to do it

Step one

Add the following css.

Click edit first row, go to Advanced tab and put following CSS code in CSS for Row Elements field.

You can change the color of the hover effect by editing this value – background: rgba(0,0,0,0.16);

Step two

Edit the content block you want to add the link to, then open hte Text tab and put this code at the end

All done! Publish and show off your new tiled layout to your visitors 🙂