Icon overlay on Query Loop Featured Image elements?

I would like to add an icon overlay to the Featured Image on a Query Loop featured image element.

The idea being a youtube play button, for example, or a magnifying glass on hover.

I’ve been trying to figure out the best way to do this using CSS but I can’t seem to get it to position properly over top the element.

Any help would be appreciated.

Thank you,

I figured out a way to do this using a dynamic background inside the parent container and then setting a background color and min-height on the child container.

Not sure if there’s a better way but it appears to be working.


Hi @joeldeteves

You can try adding the Featured image and the icon in one container, then set the position of the icon to absolute. Then, set the position as you prefer.

1 Like