Forum Academy Marketplace Showcase Pricing Features

Image overlay in new responsive engine

Need help New Responsive Engine
#1

Hi Bubblers,

Wondering if anyone has tried this…

I’m building a social media module to my app and in the process of designing a user profile page. I am using LinkedIn as a design reference, and I’m trying to figure this one out.

In LinkedIn, their profile image is overlayed on top of their profile cover image. I tried to do this using the new responsive engine and just couldn’t get it for the life me.

Has any one tried this? Any idea how I can get the desired results?

image
image798×396 62.1 KB

Thanks,
FundKernel Development

#2

Hi there, @simon.wong… I don’t pretend to be an expert on the new responsive engine, but I believe one way to do what you are showing is to use a negative value for the top margin on the profile image (if it’s not grouped together with everything else at the top). Want to give that a shot?

Best…
Mike

1 Like
#3

You can achieve this by setting the Image as the group’s background, and place a shape (or group) inside the group with a transparent color value. You can also hide/change transparency value on hover to create the REVEAL effect :slight_smile:
P.S. you can also place any desired elements inside the inner (transparent group), for example the Edit (pencil) icon. In this case you can change the inner group’s background transparency to 0% on hover. This will not only reveal the image underneath but also retain any Elements or Icons that have to stay on top.
You can also reveal more text on Hover: Place the text inside the inner group and set it’s initial transparency to 0% and on hover make it 100%. :grin: :wink:

#4

Hi @simon.wong,

You’ve been given some valid suggestions. Yet another approach would be to use the Align to parent (ATP) layout type/mode.

Ultimately, the best approach might depend - at least in part - on how you want the page to look/behave on mobile and intermediate screen sizes.

EDIT

BTW, a combination of approaches can be used as well - e.g. negative margins work with ATP layout mode, etc.

2 Likes
#5

Thanks @mikeloc , @deejay.shani @sudsy

Let me give those a try. Just tried negative margin (never occurred to me that it can be negative) and it worked conceptually. Now I just need to figure out how to replicate the placement.

Thanks everyone!
FundKernel Development

#6

Hi,
Thanks for your solution. But i am facing similar issue for making a hero banner for my homepage. I am setting the image as the background of a group but the image gets cropped from the bottom and also how to make it responsive.