Icon over top of image - 2021 best practice approach?

[fxground]

Hey,

I’ve read a lot of old articles/posts from 2014 / 2016 on how to have an icon over top of an image. I’m using the latest xpro, but wondering the best approach. is it using a grid? Would it be using the transform / effects? Different columns with z orders? Trying to keep everything responsive too… would love to know your approach you recommend. Its for a play button over an image but i need some flexibility on what images get it and that could change so i don’t want to just use a photoshop water mark and also hoping to do it without custom css

Thanks!

[prakash_s]

Hello @fxground,

Thanks for writing to us.

To achieve this layout you need to follow these steps.

1. Add image in the column background
   
   
2. Set the padding top and buttom in VW unit
   
3. Add an Icon element inside the column
   

Hope it helps
Thanks

[fxground]

Thanks, this worked perfectly. But maybe i’m going around this the wrong way and should just be using a program to lazyload the videos and have the videos embeded. Is there a way to lazy load these within x or is a plugin needed?

Thanks

[marc_a]

Hi @fxground,

There’s no built in lazy load functionality in our theme option, you need a plugin to apply lazy load on your website.

Thank you.