Subtle hover overlays


Someone asked this question 1 year ago and had no replies

Why is there no bric to add text overlaying an image with a hover effect ?

I don’t care about all the many iphone and laptop templates. I haven’t seen anyone here using them so put the time into necessary elements.

I have just spent a few hours trying to figure out how to make it in your custom brics editor but the documentation is ridiculously vague, I gave up.

I spent another couple of hours in a custom html code bric which works but is getting very messy and counter to the aim of Blocs. I am having to hand code an element which is fundamental to most web layouts.

any solution ?


I recently used a simple hover effect with css.
I set a row with a normal background and over background. I used some scripts to make the whole row clickable and set a transition to the fade. Its not perfect but it gives a nice effect.
I also make them to work like the tabbed content, if you click one row it hides some elements and show others. Its not a change visibility feature.
For the text effect you can use an rollover animation with one of many effects available.
Hope it helps


Video does not play


Right click; open in a new window. It worked for me


strange not working





You can take a look at this video to learn another way to create the hover effects for images. There are so many ways you can do that, and in this one I am using the image as a background with button as overlay.


looks great. similar to the one I had to make myself, but this should be implemented as a standard brick or bloc so we don’t have to make scripts and custom HTML ourselves as it is such an essential element to any website.


Eldar, you can apply this class to the image-background so the scale transition between images is faded. Otherwise its instant and the effect its not so smooth

.image-background { transition: background-image 0.2s ease-in-out; }