Streaming live at 10am (PST)

Scale transform an image behind a cut-out

Hi all,

On my personal magic site, I thought of creating a cut out of my face and using a galaxy image behind it that moves to create a “that’s cool” moment when the visitor arrives.

I have it working the way I want on desktop, but I’m not sure the best way to get it working on mobile.

I’m using the background image for the cut out and positioning everything else around it which isn’t ideal as it’ll be a mess on different devices.

Is there a better or neater way all round to do this, maybe using code?

Mark is the effect just behind the face? Are you using a gif or an interaction to move the background image? One thought I have is place the face in a smaller div than you have and apply the background image to that div. You can resize the div as need for each device. It is a cool effect. Let me know if you need help with it.

Yes I’m using an interaction just behind the face at the moment.

So if I use a div with the galaxy image and add an interaction to scale, how do I stop the face scaling too as the face will be a child of the div?

give a second uploading a screencast for you. but basically make a smaller div whatever size you want. place all of the items within that div position absolute. And make the div overflow hidden. You are stacking layers. So I forgot to mention in the screencast you will have to set the z index for the face to stay above the galaxy image. I did both the header and the face in the div though you may just want to create a div with the face and galaxy only. Let me know if you need any clarification.

1 Like

YES! That’s perfect. I was sitting away from the computer and thought… I need to make them siblings! Then I saw your reply so I’ve just done it.

I’ve made the png 500 x 500 too so it’s easier to move around.

I"ll make the interaction a bit more subtle so it’s not “in the face”.
Thank you for the clear instruction Jeremy

1 Like

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