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.
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
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
Please post all videos to YouTube. Just make them UNLISTED if you don’t want people to find them by searching on YouTube. That way you don’t need to worry about your videos taking up your DropBox space, and you need not worry about the link to the videos suddenly vanishing in the future.
Great video. I was able to recreate it with some tweaks, including use of @chicuelo’s “ease-in-out” code @0.5s. Your trick somewhat achieves my aim. However, use of a Background image is not ideal since we lose the means to use 1x, 2x and 3x images. I’d love to see it work with a normal image (such that we can use all 3 sizes), and to achieve that we need to be empowered to use Classes with spaces in their names, applied to the images. That will allow us to use Bootstrap image effects (assuming we can also figure out how to put a DIV inside a DIV).
Yet another problem is that background image isn’t responsive across breakpoints in my testing. And when I add “img-fluid” to it, the height becomes a problem, especially when used inside a card with a Header, then the image, then the Body. When I fiddle with the class governing the Row, the background image shrinks across breakpoints but then there is too much whitespace above and below the image in the MD breakpoint.
Again, it’s really best if we can achieve these hover effects without use of a background image.