Drop Shadow Effect For Images & Videos – Image-shadow

Category: Image , Javascript , Recommended | December 23, 2018
Views Total:913 views
Official Page:Go to website
Last Update:December 23, 2018


Drop Shadow Effect For Images & Videos – Image-shadow


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

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>



  • Adding translate image

You Might Be Interested In:

Leave a Reply