0
205
ViewsBlurred box with transparent center with css in react js
I have a design like this:
and I have a code like this:
<div data-testid="container" class="reactEasyCrop_Container img-crop-container">
<img alt="" class="reactEasyCrop_Image reactEasyCrop_Contain img-crop-media" src=""
/>
<div data-testid="cropper" class="reactEasyCrop_CropArea
reactEasyCrop_CropAreaRound" style="width: 371.594px; height: 371.594px;">
</div>
</div>
Now, how can I have this blur box that is transparent in the center with this code and CSS? Note that I can only use CSS and can't change the HTML code
·
Juan Pablo Isaza
1 answers
Answer question0
Without changing the html structure you can use
radial-gradientto do so
.reactEasyCrop_CropAreaRound {
display: none;
}
.img-crop-container {
position: relative;
width: 200px;
}
.img-crop-container::after {
content: "";
width: 100%;
height: 100%;
background: #FFFFFF70;
position: absolute;
background: radial-gradient(circle at center, transparent 50%, #ffffffa0 50%);
filter: drop-shadow(0px 0px 6px #ffffffa0);
top: 0;
left: 0;
}<div data-testid="container" class="reactEasyCrop_Container img-crop-container">
<img alt="" class="reactEasyCrop_Image reactEasyCrop_Contain img-crop-media" src="https://picsum.photos/200" />
<div data-testid="cropper" class="reactEasyCrop_CropArea
reactEasyCrop_CropAreaRound" style="width: 371.594px; height: 371.594px;">
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question