JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div class="col-md-3">
    <div class="imgslide"><img src="http://beautiful.coolphotos.in/images/beautiful-paintings/11427-Beautiful-Paintings-Of-Nature-532-1_beautiful-paintings.jpg" height="300" width="300" /></div>
    <div class="hover"></div>
</div>

CSS

.imgslide{
    position:absolute;
    width:300px;
    height:300px;
}
.hover{
    display:none;
    width:300px;
    height:300px;
    background-color:red;
    margin:0;
    position:relative;
    z-index:10;
}

JavaScript

$(document).ready(function(){
    $('.imgslide').mouseover(function(){
        $('.hover').show();
    });
    $('.imgslide').mouseout(function(){
        $('.hover').hide();
    });
   
});