Images on top of images not scaling and moving together

[sravani.anumolu]

My website has employees pictures and I would like it to show their names, contact info, and links to social media on hover. I was able to get the text over the images to scale properly but I can't get the Linked In and Email icons (images) to scale proportionately with the rest of the text and employee headshots and move with them when the browser window changes size.

Thanks for the help!

---

Public share link:
https://preview.webflow.com/preview/carlye-s-exceptional-site?preview=46d0303ac758861205b5285b23ba6742

[sabanna]

Hi, @sravani.anumolu

You can try using VW/VH measurements, which is equal %of the viewport (browser size).
vh - viewport height, vw - viewport width

Then the image/icon size will depend on the browser size and will scaling proportionally

Cheers,
Anna

[sravani.anumolu]

Hey @sabanna
I tried your suggestion and although the image does scale down, it doesn't stay fixed onto that part of the employee's headshot- it ends up moving down a little bit. Any ideas?
I also can't change the linkedin and email icon images to have margins in %- when I do the % changes to "infinity" and if i change that to a number, it doesn't move at all

[sabanna]

1) Using negative margins is not recommended unless there is no other way to move the sibling element.

2) I would suggest changing the structure of the member block:

3) There is really no reason for giving the new class name to each image and element, which repeats in each member block.

4)Elements with absolute position should be positioned by setting distance from top, bottom, left or right edge of its relative parent

[system]

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.