JSFiddle - React, Tailwind, and code Playground
HTML
<div id="circular">
<ul id="grid">
<li>
<a href="javascript:;">
<img src="http://puu.sh/5Apye.png" class="grayscale"/>
<img src="http://puu.sh/5Apye.png" class="rollover" />
</a>
</li>
</ul>
</div>
CSS
#circular {
position: relative;
z-index: 1000000;
}
#grid {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
#grid li {
float: left;
width: 33.33%;
position: relative;
margin-bottom: 20px;
padding: 10px;
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
}
#grid li:hover {
-moz-transition: all 1.25s ease;
-webkit-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
#grid img {
width: 90%;
height: auto;
display: block;
}
#grid img.rollover {
position: absolute;
opacity: 0.5;
filter: alpha(opacity = 0.5);
top: 0px;
left: 0px;
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
img.rollover {
position: absolute;
opacity: 0.5;
filter: alpha(opacity = 0.5);
top: 0px;
left: 0px;
}
JavaScript
$('#circular li').hover(function () {
$(this)
.find('img[class="rollover"]')
.stop()
.animate({ opacity: 1 }, 150);
return false;
}, function () {
$(this)
.find('img[class="rollover"]')
.stop()
.animate({ opacity: 0.5 }, 150);
return false;
}
);