How to have an inset box-shadow start from the center rather than the border?

Question

I currently have a box shadow stemming from the border of my <img> and I'm looking for a way to have the effect inversed, where the shadow starts from the center and fills out the rest of the background. Pen

CODE:

var medalImg = document.getElementById("benefitsImgMed");
document.getElementById("benefitsImgMed").onclick = function() {
  imgClickFunction1()
};

function imgClickFunction1() {
  medalImg.style.boxShadow = "0px 0px 0px 100px white inset";
  setTimeout(doSomething, 1.6 /*Seconds*/ * 1000);

  function doSomething() {
    /*medalImg.style.borderStyle = "solid";*/
  }
}

body {
  background-color: black;
}

#benefitsImgMed,
#benefitsImgLig,
#benefitsImgArr,
#benefitsImgNig {
  transition: 2s;
  cursor: pointer;
  z-index: 1;
  position: absolute;
  padding: 10px;
  border-color: white;
  border-width: 5px;
  border-radius: 50%;
  border-style: dashed;
}

#benefitsImgMed:hover {
  box-shadow: inset 0 0 0 50px white;
}

#benefitsImgMed {
  margin-left: 8%;
  margin-top: 6%;
  width: 13%;
  height: 13%;
}

<div class="benefitImgs">
  <img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9
    140b7f3b7d84274/1510600813361/quality.png" id="benefitsImgMed" />
</div>

Maybe a box shadow isn't the best method? Here's an alternative concept: https://stackoverflow.com/q/33160540/3597276 — Michael Benjamin, Nov 14 '17 at 20:56
I made some changes to your pen: https://codepen.io/anon/pen/GOvryv — Marouen Mhiri, Nov 14 '17 at 21:10

Neil · Accepted Answer · 2017-11-14T21:21:46.720

I looked over you code an changed a couple things. It seems like you may have some repetitive code by looking at them by id's. So instead I implemented a custom attribute to help us to keep track of which one was clicked. Additionally, I added an element on the inside that has very small width and height that draws a box-shadow outward. Go ahead and give it a whirl:

function doSomething() {
  console.log('do something...')
}

$(".benefitImgs").click(function () {
  var which = $(this).attr('data-which');
  if (which === "med") {
    $(this).find(".benefitImgsInner").css("box-shadow", "0px 0px 0px 55px white")
    setTimeout(doSomething.bind(this),1.6*1000);
  }
});

body{background-color:black;}

.benefitImgs {  
  width: 13%;
  position: relative;
  margin-left: 8%;
  margin-top: 6%;
   transition: 2s;
   cursor:pointer;
   z-index:1;
    padding: 10px;
    border-color: white;
    border-width: 5px;
    border-radius: 50%;
    border-style: dashed;
}

.benefitImgsInner {
  z-index:-1;
  width:2px;
  height:2px;
  border-radius:50%;
  position:absolute;
  top: 50%;
  left: 50%;
  transition:all 2s ease-in-out;
  transform: translate(-50%, -50%);  
}

.benefitImgs:hover .benefitImgsInner {
  transition:all 2s ease-in-out;
  box-shadow: 0 0 0 50px white;
}

.benefitsImgsImg {    
    max-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="benefitImgs" data-which="med">
  
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgsImg"/>

<div class="benefitImgsInner"></div>
</div>

score -1 · Answer 2 · answered Nov 14 '17 at 21:18

Try this solution:

Note: I've dumbed it down substantially.

body{background-color:black;}

#benefitImgMed {
   transition: 2s;
    width: 200px;
    height: 200px;
   cursor:pointer;
   z-index:1;
   position: absolute;
    border-color: white;
    border-width: 5px;
    border-radius: 50%;
    border-style: dashed;
    overflow: hidden;
}

#benefitImgMed:after{
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  background: white;
  opacity: 0;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  transition: all 1s;
}

#benefitImgMed:hover::after{
  background: white;
  height: 100%;
  width: 100%;
  opacity: 1;
  top: 0px;
  left: 0px;
}

<div id="benefitImgMed">

</div>

YOU CANNNOT have a before and after on an image tag!!!Most Browsers don't support it — Marouen Mhiri, Nov 14 '17 at 21:21

How to have an inset box-shadow start from the center rather than the border?

2 Answers2