Masking with a round elements, how to ..?

This example stems from the tread beneath, where I downloaded file masking.hype.

https://forums.tumult.com/t/masking-elements-by-using-content-overflow-groups-help/9343

Also I read this one somehow about the samme issue

I cannot figure out the example: As stated the underlying square-element should appear masked, but what I notice is just an overlying box (with round corners) and NO masking. My wish is to create circular masking. Have I missed something out here?

circular-mask-ff-render

If actually the "masking" solution simply is about covering other elements, the method -- to me -- is pretty useless on uneven, patterned backgrounds.

Is this correct?

Tried:

  • Preview in FireFox, Safari
  • Switched "Webkit accelleration" on and off --> no effect

Kind regards Mikael

The example you posted are demos. As such the overlaying circle’s transpency is not 100% to show there is a box under it.

Can you post you own file so we can see what you are actually doing/want to do

Cheers

MarkHunte
Thanks for your response. Any help is highly appreciated :slightly_smiling_face:

I want the green “square” to mask the group “MASKED_ITEM”. Does that make sense?

Here’s the file:
interaktivt-kort_forum.hype.zip (288.4 KB)

Kind regards, Mikael

I would use a group.

Add the MASKED-ITEM to a new Group.

Set the new groups radius to a very high number to make it into a circle.
Set it border to a colour and pixel size you want.

You then need to play with setting the expansion of the New group and the top, left of the MASKED-ITEM so that it appears to stay in the same place. ( I used guide line to do this)

interaktivt-kort_forum_mhv1.hype.zip (326.6 KB)

4 Likes

Amazing! You’ve been very helpful with the feedback and clarifying example. Actually you solved my next problem also: How to deal with “the crazy offset syndrome”. Your solution with adjusting the elements with guides helped me alot :slight_smile:

Kind regards and in thankfulness,
Mikael

2 Likes