Display the shadow of an image – Javascript Plugin

In this post I am going to share Simple and small Javascript plugin to display the shadow of the image. The Plugin provides a simple way to apply a drop shadow effect to any image and video using pure JavaScript.
image-shadow


Libraries

Load the plugin library form CDN

<script src="https://cdn.jsdelivr.net/gh/tunguskha/[email protected]/assets/js/image-shadow.js"></script>

HTML

All you need is .ishadow wrapper to the image and blur value in data attribute

<div class="ishadow">
  <img 
	class="img" 
	data-blur="20" 
	src="assets/imgs/halt-and-catch-fire.jpg">
</div>



Also, you can make an element hoverable by adding data-hover="true".
false by default

<div class="ishadow">
  <img 
	class="img" 
	data-blur="20" 
	data-hover="true" 
	src="assets/imgs/halt-and-catch-fire.jpg">
</div>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by tunguskha. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.