0
224
ViewsHow to create a round area to to fix image as Facebook avatar
I'm creating an input, where users can upload file images to change avatars as Facebook does. But I know Facebook creates a cycle area and users can fix the image to fit with that circle (image below). I have no idea how to do it. Tell me if you know
·
Santiago Gelvez
1 answers
Answer question0
Possibly the easiest way to achieve such an effect is to overlay a rounded rectangle with a transparent black outline over the image. However, you will also need to wrap the element in another container with overflow set to hidden to limit the backdrop to the image.
Here is a quick demo:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
}
.circle {
position: absolute;
border-radius: 100%;
outline: rgba(0, 0, 0, 0.5) 100vmax solid;
height: 200px;
width: 200px;
top: 50px;
left: 150px;
}<div class="wrapper">
<div class="circle"></div>
<img class="image" src="https://picsum.photos/500/300">
</div>
·
Santiago Gelvez
Report
Answer question