JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="#">
	<span class="kolesnisagun" ></span>
	<img class="gravitaxsam" alt="" src="http://wpandsuch.com/posts/jquery-image-rollover/images/pic2.jpg">			
</a>

CSS

span.kolesnisagun {
background:url(http://wpandsuch.com/posts/jquery-image-rollover/images/mag.png) center center no-repeat #000;
	height: 309px;
	position: absolute;
	width: 309px;
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 5px #101010;
	-moz-box-shadow: 0px 0px 5px  #0c0c0c;
	box-shadow: 0px 0px 5px  #0e0e0e; 
}

.gravitaxsam {
 	height: 309px;
	width: 309px; 
  box-shadow: 0px 5px 8px rgba(66, 61, 61, 0.36), 0px 7px 23px -14px rgba(76, 71, 71, 0.17);
 }

JavaScript

$(function() {
$(".kolesnisagun").css("opacity","0");
$(".kolesnisagun").hover(function () {
$(this).stop().animate({
opacity: .7
}, "slow");
},
function () {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});