'Basic CSS issue with image mask

I'm doing a figma to html right now. Link : https://www.figma.com/file/X6ailPBDc7C7C2uMohXYuo/Untitled?node-id=0%3A1 The issue is I can't design the 2nd section which is the app screenshot inside a babypink circle. This is my code : https://github.com/Farhatmahi/Weight-Loss-Page Can anyone tell me how to fix this?

htmlcss


Solution 1:[1]

Add below property to your circle class. This should do the work for you.

.circle {
   overflow: hidden;
}

Solution 2:[2]

Just add overflow: hidden; to your #section-2 .circle style.

Solution 3:[3]

use box-shadow like this it is almost working.

#section-2 .circle img{
   box-shadow:0px 0px 0px 0px  white ;

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ankit Tanna
Solution 2 Nicolas Goosen
Solution 3 Sameer Mughal Dark

Related Questions