Images with hover overlay

hello,
I would like to have a row of pictures with a hover overlay of text. Here is an example: https://sihope.org/faces-of-hope.html
How can I implement something like this with Xtheme?
Thank you

Hi Jennine,

Thank you for writing in, you can create a team grid like that by utilizing the The Grid or Essential Grid extension.

Hope it helps,
Cheers!

hello,
I would like to know about the hover feature, not the grid. When you hover over the face an overlay comes up and white text. Can I do this in xtheme?

Hi @Jennine,

Please follow the instructions below on how to create an image with hover overlay text:

1.) Enable the Advance Mode https://theme.co/docs/advanced-mode
2.) Add a section and columns, on my example I choose 3 columns
3.) Add a background image to each column
4.) Then add the button element
5.) Make the width of the Button 100%
6.) Remove the border-radius and Box shadows of the button
7.) Adjust the padding of the button to fill everything on the column height
8.) Use Interaction, to do the trick on the hover part
9.) On the Primary Text Format Option, set the base color to transparent then in interaction set your desire color
10.)On the Setup Option, set the background base to transparent then in interaction set your desire color
11.) Then Save the button preset and apply it to the other columns.

See this video below, on how I implement the instructions above.
https://www.dropbox.com/s/f7st36vkqguvld5/Images%20with%20hover%20overlay.mp4?dl=0

Then you will have now an image with hover overlay text. I hope it will help you to solve your concern.

Check this https://theme.co/docs/button for more information about the buttons.
Thank you.

great thank you

@Jennine,

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.