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?
Hi there, @anon8756174… 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?
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
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%.
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.
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.
