JSFiddle - React, Tailwind, and code Playground
HTML
<img class="img" src="http://forum.htmlbook.ru/public/style_images/hb.png">
<button class="span"> Нажми меня </button>
CSS
body {
background:#ddd;
margin: 0 auto;
width:500px;
text-align: center;
}
button {
background: #ccc;
border-radius: 5px 5px 5px 5px;
padding: 5px;
position:relative;
top: 30pt;
right: 80pt;
cursor: pointer;
}
.shadow {
-webkit-box-shadow: 0px 0px 80px rgba(0, 142, 162, 1);
-moz-box-shadow: 0px 0px 80px rgba(0, 142, 162, 1);
box-shadow: 0px 0px 80px rgba(0, 142, 162, 1);
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
.shadoww {
-webkit-box-shadow: 0px 0px 0px #fff;
-moz-box-shadow: 0px 0px 0px #fff;
box-shadow: 0px 0px 0px #fff;
}
JavaScript
$('.span').click(function(){
$('.img').addClass('shadow');
setTimeout(function () {
$('.img').removeClass('shadow');
}, 1000);
});