JSFiddle - React, Tailwind, and code Playground

HTML

<div class="doc_preview">
    <div class="doc_preview_hover"></div>
</div>
<div class="doc_preview">
    <div class="doc_preview_hover"></div>
</div>

CSS

.doc_preview {
    background: #f00;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 280px;
    margin-left: 25px;
    position: relative;
    z-index: 100;
}
.doc_preview_hover {
    background: rgba(0, 0, 0, .35);
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: -100%;
    z-index: 101;
}

JavaScript

$('.doc_preview').hover(function() {
    $(this).find('.doc_preview_hover').animate({
        top: 0,
        left: 0
    }, 300);
}, function() {
    $(this).find('.doc_preview_hover').animate({
        top: '-100%',
        left: '-100%'
    }, 300);
});