How can I add inside box-shadow to an image in css?-CodePudding

How can I add inside bottom shadow to an image using css?

.example > img {
  width: 100%;
  height: auto;
  box-shadow: inset 10px 10px 5px red;
  border-radius: 5%;
}

CodePudding user response：

I would generate a pseudo element to be used as an overlay.

.example {
  position: relative;
  width:200px;
  height:100px;
}
.example::before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 15px red;
}
.example > img {
  width: 100%;
  height: auto;
  border-radius: 5%;
}

<div >
  <img src="https://picsum.photos/200/100" alt="">
</div>

CodePudding user response：

Use an inset-box-shadow on .example and just set img to z-index: -1;.

.example {
  position: relative;
  width: 200px;
  height: 100px;
  box-shadow: inset 0 0 15px red;
}

.example>img {
  width: 100%;
  height: auto;
  border-radius: 5%;
  position: relative;
  z-index: -1;
}

<div >
  <img src="https://picsum.photos/200/100" alt="">
</div>

CodePudding user response：

hmm, inset bottom shadow - could work like this

.example {
  box-shadow: inset 0px -20px 25px -20px red;
  display: inline-block;
  border: 1px solid black;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class='example'>
  <img src="https://picsum.photos/200/100" alt="">
</div>

</body>
</html>

You can check out each attribute box-shadow is able to take, tweek around ! https://www.w3schools.com/cssref/css3_pr_box-shadow.asp