Add CSS Drop Shadow Effect To Image - image-shadow.js

image-shadow.js is a small jQuery script that applies a responsive, CSS/CSS3 powered drop shadow effect to images within your document.

Also avaiable as a vanilla JavaScript plugin.

How to use it:

1. Load the required stylesheet image-shadow.min.css in the head section of the webpage.

<link rel="stylesheet" href="assets/css/image-shadow.min.css">

2. All insert the following CSS snippets into your CSS file.

/*--- Container that maintains image and shadow. ---*/
.container-img {
  position: relative;
}

/*--- IMG takes the full size of container-img. ---*/
img {
  max-width: 100%;
}

/*--- Setup the image shadow. ---*/
.img-shadow {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: -10%;
  left: 5%;
  width: 90%;
  height: 95%;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

/*--- Remove shadow for IE and Edge (does not support blur filter). ---*/
@supports (-ms-ime-align: auto) {
  .img-shadow {
    display: none;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .img-shadow {
    display: none;
  }
}

3. Add a shadow element to your image.

<img class="img" src="image.jpg" alt="alt">
<div class="img-shadow"></div>

4. Load the necessy jQuery library in the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

5. Apply the drop shadow effect to all the images within the document.

$(".img").each(function (e) {
  var imgSrc = $(this).attr("src");

  $(".img-shadow")
    .eq(e)
    .css({
      "background-image": "url(" + imgSrc + ")"
    });
});

---

This awesome jQuery plugin is developed by tunguskha. For more Advanced Usages, please check the demo page or visit the official website.