# Overlay card using tailwind **URL:** \ **Category:** Elements\ **Created:** [January 8, 2026, 2:02am UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538 "2026-01-08T02:02:16Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![rashley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/rashley/32/33479_2.png) [@rashley](https://forums.realmacsoftware.com/u/rashley)\ **Post date:** [January 8, 2026, 2:02am UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/1 "2026-01-08T02:02:16Z")
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 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 8, 2026, 9:04am UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/2 "2026-01-08T09:04:07Z")
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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/0/502e575a1043afbeeea2386e8813b8b02e7d9132.gif) If you can give me some more information on what you’re trying to do I’m sure I’ll be able to help 🙂 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? ---
**Author:** ![rashley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/rashley/32/33479_2.png) [@rashley](https://forums.realmacsoftware.com/u/rashley)\ **Post date:** [January 9, 2026, 10:05pm UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/3 "2026-01-09T22:05:07Z")
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](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 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 12, 2026, 3:36pm UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/4 "2026-01-12T15:36:44Z")
Hey Robert, I’ve record a tutorial showing how to build the layout you wanted, along with an example [Elements project](elementsapp://downloadDocument/fOOKRRPMvn1s), let me know if you have anymore questions 🙂 [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/b/ab8395aabbf2c9f8943b63786e921bab9d73cfad.jpeg "Let’s Build: A Two-Column Layout Using Grid and Flex") ](https://www.youtube.com/watch?v=jCqnJmvTkgk) 👉 [Open Project in Elements](elementsapp://downloadDocument/fOOKRRPMvn1s) ---
**Author:** ![rashley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/rashley/32/33479_2.png) [@rashley](https://forums.realmacsoftware.com/u/rashley)\ **Post date:** [January 12, 2026, 10:13pm UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/5 "2026-01-12T22:13:02Z")
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! ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 12, 2026, 10:51pm UTC](https://forums.realmacsoftware.com/t/overlay-card-using-tailwind/53538/6 "2026-01-12T22:51:57Z")
Awesome. Glad I could help ☺ 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!