Creating shapes with images

Design help General
1

Hello,
So there is a design I am struggling to create in Webflow and at this point, I am not sure it is possible.
I want to create 4 shapes (2 rectangles and 2 Trapezoids) which will have an image inside of them and each couple of seconds the image will change (I have quickly drawn something similar in after effects):

PNG
PNG1766×691 188 KB

Now I know how to create those shape through DIVS (by manipulating their borders), but if I do that, there is no way for me to put images in there and for the divs to cut them with overflow.

At this point, I am considering to make the whole animation in After effects and try to export it to the web? (Not sure how that works though and it probably won’t be responsive).

Are there any solutions how to do in Webflow designer or even custom code?
Any help will be appreciated

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Nooooo! Although it would work, and it would be responsive, but there are better ways to explore before.

There are many way to clip ans mask content on the web, and one that will be useful to you is masking with shape. Please check this page, and try to see if something fits you.

2 Likes
3

Hello Vincent,

Thank you for your reply, didn’t know CSS has masking functionality.
I started to play a bit with the different examples you have to learn it but I already have problems.
I tried to recreate the first example you show but the text just seems to dissapear, not really sure what I am doing wrong.

Would highly appreciate if you could take a look:
https://preview.webflow.com/preview/orb-website-v1-961fb5a0a9128ef359268c1f?utm_source=orb-website-v1-961fb5a0a9128ef359268c1f&preview=63a4ede267d76a98ff21815fb101ebcb

Alternatively, so I wouldn’t waste too much of your time, is there a clonable version available so I could see it in the designer?

Thank you again for your help!

1 Like
4

I have to run so can’t look. Can’t publish it already for cloneable because it’s quite dirty. But feel free to look at it in the designer with this public link :slight_smile:

https://preview.webflow.com/preview/clipping-masking?utm_source=clipping-masking&preview=9ad6d870285a5f054e8124f1b33f1661

2 Likes
5

Hey,

Thank you, I think I figured this out. I will write again, if there are any follow ups.

Thanks again for your help!

1 Like
6

Great! Show us the results :slight_smile:

2 Likes
7

@vincent Thanks for this! I am new to web flow and would like to apply your ‘external image as a mask’ method. I have tried using the code and named my div - masked so that it applies. However, nothing is working.

I am using this in a html embed:

.masked{ -webkit-mask-image: url(https://uploads-ssl.webflow.com/5a6e3b72863f20000178b0c4/5a6e4e9910ba5800018a6c32_5a6b709a41e4ab00014b3dc7_lzorange-Artboard%2030%20copy.svg ), none; mask-image: url(https://uploads-ssl.webflow.com/5a6e3b72863f20000178b0c4/5a6e4e9910ba5800018a6c32_5a6b709a41e4ab00014b3dc7_lzorange-Artboard%2030%20copy.svg ), none; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; }