Overlay card using tailwind

Elements
1

I am trying to create a card and imagebox that has an overlay image that centers itself over a flex of image and text area. I can get it to work on one size but changing screen width moves the image vertically out of alignment.

(see Our Method/mission):

elementsapp://downloadDocument/0ykrBSFNKJkz

also still looking for a way to apply opacity to only the background in cards 4 and 5

Thanks,

rashley

2

Hi @rashley,

I’m 100% sure you’ll be able to do what you want in Elements, and that we’ll be able to help you. However, I couldn’t quite follow your instructions on what you wanted (sorry).

Let’s tackle the card issue first. As far as I can see the circular image stays centred in the card when resizing the page. What is the issue here?

CleanShot 2026-01-08 at 9 .01.16

If you can give me some more information on what you’re trying to do I’m sure I’ll be able to help :slight_smile:

Edit: I see your card is a custom component… you would be able to build these with our native built-in components. Would you like me to do that for you?

3

Thanks for the response!,

The card issue is that the background opacity dims the entire card not just the background. I know I must have the bgOpacity in the wrong place but have never worked with tailwind before and my css is old and forgotten. (40+years ago)(It was new back then and only a hobby)

The other issue is with the sizing of the “our methods” card and the overlay image moving vertically and the card not shrinking to fit in a grid.

I am trying to mimic the stacks on this page": https://adaptivetherapiesnm.com

Sorry I’m so out of touch with doing this.

Can any of your new scaffolding cards mimic this overlay format?

Thanks

Robert Ashley

4

Hey Robert,

I’ve record a tutorial showing how to build the layout you wanted, along with an example Elements project, let me know if you have anymore questions :slight_smile:

:backhand_index_pointing_right: Open Project in Elements

5

Dan,

Thank you so much for addressing this issue so completely and quickly.

I was on the right track for most of it but the key to the overlay was adding the script in the advanced section to control the vertical.

You’re awesome!

1 Like
6

Awesome. Glad I could help :smiling_face:

You could have also wrapped the circular image in a flex, and used the negative offset on the flex item to achieve this (so no need for the css code). That is the Power of Elements, there’s always multiple ways of achieving what you want to do!