Masking and scaling imported images

  • 29 April 2014
  • 3 replies
  • 171 views

How do I mask and scale an image that I imported into a box? I have used an unbounce template that had circles that you could upload images into and then adjust masking. I have tried -recreating this in another template by adding a square and adjusting the border and background properties but it didn’t scale the image or let me mask it.


3 replies

Userlevel 3
Badge +1

Hi John - Typically, the effect you’re looking for requires both the image and also the box creating the border around/background of the image to be set to the same size/shape. The box just sets the border/background and then you can apply masking to the actual image to change the scale while keeping it bound within the correct shape.

I made a quick video to show you what I mean:
http://screencast.com/t/lHGoyE14

In the video, I use the box element to create a border and then place an image onto the page and adjust it’s shape so it sits inside the box. Once that’s done, I edit the mask for the image element to set that.

If that’s not quite what you were going for, please let me know or give us a shout at supportATunbounce.com and we can dig in a bit further for you.

What I am wanting is to have an image that I can turn into a circle.
In most cases it is a headshot of a person. There usually is a background that needs to get cropped.

I find that if I can turn the image into a perfect square through cropping, I can use the border properties to adjust the corner radius to make the image a circle. I thought I would be able to do this with the masking but it appears this is one way to get the same effect.

Userlevel 3
Badge +1

Hi John - the masking will only let you zoom in and out on an image while maintaining it’s current shape, so you will have to adjust the corner radius to get the initial circle shape and then you can use masking to zoom in and out while maintaining the outer shape of the image.

Reply