JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenedor">
    <div class="atCorner" id="picture">
        <img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" />
    </div>
    <div class="atCorner escondido shadow" id="">
    </div>    
    <div class="atCorner escondido button" id="">    
        <button>Buy it</button>
    </div>
</div>

CSS

.contenedor{
    position:relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    
}
.atCorner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}
.escondido{
    display: none;    
}
.shadow{
    background-color: black;
    zoom: 1;
	filter: alpha(opacity=70);
	opacity: 0.7;
    
}
.button{
    text-align: center;    
}
.button button{
    margin-top: 40%;
    
}

JavaScript

$('.contenedor').mouseenter(function(){
    jQuery(this).find('.shadow, .button').slideUp();
}).mouseleave(function(){
    jQuery(this).find('.shadow, .button').slideDown();
});