Tapas Tapas - 2 years ago 173
CSS Question

How do I blur the border of my image div?

Can somebody help me in this?

I have tried box shadow and border but couldn't get the transparency in the border:

<div class="" style="border-radius: 125px;
width: 125px;
height: 125px;
margin: auto;
box-shadow: 0 0 0 6px rgba(68,68,68,0.25), 0 0 0 15px rgba(68,68,68,0.35); ">
<img src="images/tracks_bg.png" width="100%" height="100%" style="border-radius: 50%; opacity: 1 !important;">
</div>


I want the blur border as displayed in screen shot

Answer Source

You could

  • Use a wrapper DIV
  • Inside your wrapper place an absolutely positioned (full-size) blurred DIV
  • Inside your wrapper place a circle with the same background image as the blurred DIV
  • Play with box-shadow n the circle track image DIV element

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

.player {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: #000; 
}

.trackImageBlur {
  position: absolute;
  background: none 50% 50% / cover;
  opacity:0.6; /* lower opacity so we can transpare the parent's #000 bg */
  padding: 4vw; margin: -4vw; /* prevent seeing blurred-out edges */
  box-sizing: content-box; /* apply normal paddings (on the outside) */
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.trackImage {
  position: absolute;
  background: none 50% 50% / 150%;
  width: 60vh;
  height: 60vh;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow:
  0 0 0 20vh rgba(0, 0, 0, 0.2),
  0 0 0 12vh rgba(0, 0, 0, 0.2),
  0 0 0 9vh rgba(0, 0, 0, 0.3),
  0 0 0 3vh rgba(0, 0, 0, 0.4);
}
<div class="player">
  <div class="trackImageBlur" style="background-image:url('//i.stack.imgur.com/ItuWP.png')"></div>
  <div class="trackImage" style="background-image:url('//i.stack.imgur.com/ItuWP.png')"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download