Subtle hover overlays


#1

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 ?

https://tympanus.net/Development/HoverEffectIdeas/index.html

https://miketricking.github.io/bootstrap-image-hover/

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 ?


#2

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


#3

Video does not play


#4

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


#5

strange not working


#6

link


#7

Hi,

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.


#8

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.


#9

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; }