How to Overlay Image Centered within Flexbox Layout?

Design help General
1

I need to overlay a “play” button on various video thumbnails. The 50% Absolute Positioning / Translate Up 50% trick worked great when I was using a traditional Row/Column layout.

I’ve recently moved to using a flex layout so that it is easier for me to rearrange the various thumbnails, or add a new one to the top. Using flex means a lot less copying and pasting around.

Anyway, I cannot get the play button overlay to work or center any more. I tried some relative positioning stuff, which works in Chrome/Edge but fails badly in IE.

Any help appreciated, thanks

http://pdc-mockup.webflow.io/live

https://preview.webflow.com/preview/pdc-mockup?preview=016141ef2d5886e381fe17d45c62f3b5

2

I don’t know how exactly, but I got it working with relative layout of the overlay element, and a height of 0.

3

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