'Blurred box with transparent center with css in react js

I have a design like this:

enter image description here

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

javascripthtmlcssreactjs


Solution 1:[1]

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>

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 Charles Lavalard

Related Questions