How to Best Design this in X?

[istoriaagency]

Hi there,

I’d like to bring my current photography portfolio over to X theme. I really like how my current homepage functions in regards to the image category layout and functionality. Take a look: https://jaredbeasley.net/

Note how the image has a color and title display on hover. What’s the best route to replicate that in X? Can I just use an image element in a row behind a text element? Love to not use a plugin if I don’t have to.

I already have the header built on the temp page, btw: https://jaredbeasley21.wpengine.com/

Thank you in advance for your guidance,

Jared

[markomark]

https://invitationdesignstudio.com/wedding-invitations/invitation-gallery/
uses X, essential grid- with a little CSS and anchor tags, you can duplicate what you have now.

[marc_a]

Hi @jiggyjargon,

Thanks for reaching out!

If you don’t want to use a plugin to make your desire layout, you may check this previous thread on how to create an image with hover text.

Images with hover overlay

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 Intera…

Hope that helps.

Thank you.

[istoriaagency]

That’s a fairly straightforward and solid solution. Thanks! Would be nice to have some more button interactions to spice things up.

[tristup]

Hi @jiggyjargon,

Glad that we are able to help you.

Thanks