Drop Shadow Effect For Images & Videos – Image-shadow

Preview:

Description:

This is the vanilla JavaScript version of the jQuery image-shadow.js plugin that provides a simple way to apply a drop shadow effect to any image and video using pure JavaScript.

How to use it:

Import the minified version of the Image-shadow library into the document.

<script src="assets/js/image-shadow.min.js"></script>
<!-- for video -->
<script src="assets/js/video-shadow.min.js"></script>

Wrap your image into a DIV container with the CSS class of ‘ishadow’ and specify the blur level in the ‘data-blur’ effect.

<div class="ishadow">
  <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=633">
</div>
<div class="ishadow">
  <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=646">
</div>
<div class="ishadow">
  <img class="img" data-blur="20" src="https://picsum.photos/780/530?image=628">
</div>
...

To apply the drop shadow effect to HTML5 videos:

<div class="vshadow">
  <video autoplay preload loop data-autoplay="true" data-loop="true" data-blur="15" src="1.mp4" type="video/mp4"></video>
</div>

Changelog:

12/23/2018

• Adding translate image