JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
$(document).ready(function(){
$("#glowing").glow({ radius: "15", color: "white", blink: true, timegap: 1000 });
});
</script>
<img id="glowing" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c53e.png" style="width:250px"/>
CSS
body {
background-color: #000;
}
#glowing {
-webkit-transition-duration: 1000ms;
-moz-transition-duration: 1000ms;
-o-transition-duration: 1000ms;
transition-duration: 1000ms;
}
JavaScript
/*
Glow effect plugin for jQuery using CSS3 and filters
It uses filters to add glow effects on PNG images
Copyright (c) 1997-2012 Djenad Razic, Machinez Design
http://www.machinezdesign.com
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Project home:
https://github.com/MisterDr/JQuery-Glow
Usage:
Enable glow and set color and radius:
$("#testimg").glow({ radius: "20", color:"green"});
Disable glow:
$("#testimg").glow({ radius: "20", color:"green", disable:true });
or
$("#testimg").glow({ disable:true });
Version 1.0
Tested on:
IPad (IOS 6 required), Chrome 18.0, Firefox 16.0.1, IE 9 (Lower versions should work by Microsoft's browser specifications)
With jQuery 3.1.1
Version 1.1
Added blink feature to blink over one second.
Example:
$("#testimg").glow({ radius: "20", color:"green", disable:true, blink:true });
Version 1.2
Added configurable blink timegap feature
Example:
$("#testimg").glow({ radius: "20", color: "blue", disable: true, blink: true, timegap: 2000 });
Version 1.3
Added Edge and fixed older browser support
*/
(function ($) {
var moved = false;
var originalPos = null;
$.fn.glow = function (options) {
//Check if it is needed to remove effect
var disable = false;
var innerElement = null;
var detectBrowser = function() {
if (navigator.userAgent.search("MSIE") >= 0) {
return "msie";
}
else if (navigator.userAgent.search("Trident") >= 0) {
return "trident";
}
else if (navigator.userAgent.search("Chrome") >= 0 || navigator.userAgent.search("Opera") >= 0) {
return "blink";
}
else if (navigator.userAgent.search("Firefox") >= 0) {
return "gecko";
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
return...