JSFiddle - React, Tailwind, and code Playground
HTML
<div id="element" class="this">
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a> <a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a> <a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a>
<a class="thumbnail" href="xxx">
<img src="" />
<span>Title</span>
<div class="thumbnail_description">Description</div>
</a><a class="thumbnail" href="xxx">
<img src="" />
...
CSS
a.thumbnail{
display : block;
width : 100px;
height : 100px;
border : 1px dashed green;
margin : 2px;
float : left;
}
a.thumbnail:hover{
/*
box-shadow : inset 0 10px 20px #FF00FF;
*/
}
JavaScript
var shadow = "#FF00FF 0 50px 90px inset";
$('.this')
.find('a.thumbnail')
.hover(
function(){
$(this).css({
'-webkit-box-shadow': shadow,
'-moz-box-shadow': shadow,
'box-shadow': shadow
});
},
function() {
$(this).css({
'background-color': 'transparent',
'-webkit-box-shadow': 'none',
'-moz-box-shadow': 'none',
'box-shadow': 'none'
});
}
);