I want to have a inset box-shadow over my images in a bootstrap carousel but whatever I do it doesn't work. I want the shadow just around the borders of the image.

Here is my code:

.carousel-item {
    width: 100%;
}
.carousel-item>a>img {
    width: 400px;
    height: 600px;
}
.carousel-item>a>img::after {
    box-shadow: 0px 0px 60px 40px black inset;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

    
<link rel="stylesheet" href=".2.1/css/bootstrap.min.css">
    <script src=".3.1/jquery.min.js"></script>
    <script src=".js/1.14.6/umd/popper.min.js"></script>
    <script src=".2.1/js/bootstrap.min.js"></script>
    <div id="content"> 

<div id="demo" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <a href="/2/">
                <img src=".jpg">
            </a>
        </div>
        
        <div class="carousel-item">
            <a href="/4/">
                <img src=".jpg">
            </a>
        </div>
        
        <div class="carousel-item">
            <a href="/3/">
                <img src=".jpg">
            </a>
        </div>
    </div>
</div>

    </div>

I want to have a inset box-shadow over my images in a bootstrap carousel but whatever I do it doesn't work. I want the shadow just around the borders of the image.

Here is my code:

.carousel-item {
    width: 100%;
}
.carousel-item>a>img {
    width: 400px;
    height: 600px;
}
.carousel-item>a>img::after {
    box-shadow: 0px 0px 60px 40px black inset;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <div id="content"> 

<div id="demo" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <a href="/2/">
                <img src="https://www.w3schools./bootstrap4/chicago.jpg">
            </a>
        </div>
        
        <div class="carousel-item">
            <a href="/4/">
                <img src="https://www.w3schools./bootstrap4/chicago.jpg">
            </a>
        </div>
        
        <div class="carousel-item">
            <a href="/3/">
                <img src="https://www.w3schools./bootstrap4/chicago.jpg">
            </a>
        </div>
    </div>
</div>

    </div>

• javascript
• html
• css

Share Improve this question Follow asked Feb 15, 2019 at 10:35 yukashima huksayyukashima huksay 6,26899 gold badges4949 silver badges8686 bronze badges 3

• Did you link your own stylesheet? Because in the code provided you haven't. – Matt.S Commented Feb 15, 2019 at 10:38
• yes I did. I don't know how to do it in SO snippets. @Matt.S – yukashima huksay Commented Feb 15, 2019 at 10:40
• 1 I found this link: codeply./go/HTKVcweqHB/bootstrap-carousel-with-inset-shadow might help you out – Matt.S Commented Feb 15, 2019 at 10:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

From the CSS Spec:

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

Since an img doesn't have actual content, it makes sense that ::before and ::after cannot be accessed here.

One thing you can do is add a wrapper around the img and proceed from there.

.img-container {
  display: inline-block;
  position: relative;
}

.img-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0px 0px 60px 40px black inset;
}

<div class="img-container">
  <img src="http://placekitten./300/200" alt="">
</div>

jsFiddle

Try working with box shadow in negative (-). Instead using it on ::after use it on the image.

.carousel-item>a>img {
    box-shadow: 0px 0px -60px -40px black inset;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

When having box shadow over a carousel item, it means the shadow will also move. You can also put the shadow over the carousel. This means the images will slide behind the shadow.

If you can add a working snippet(it does not work for me) i can try to give you code.