JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.kfsoft.info/home/MyFadeOverImage/jquery.MyFadeOverImage.js"></script>
<div class="kwadraty-post2">	<a href="#">

        <img class="img" src="http://i.imgur.com/Nkpg0Iq.jpg"/>
           <p>HOVER ME HOVER ME HOVER ME HOVER ME </p>
	</a>

</div>

CSS

img {
    width:300px;
    opacity: 0.5;
}
.kwadraty-post2 p {
    padding: 0px 10px;
    position: absolute;
    top:40px;
    background-color: rgba(255, 255, 255, 0.5);
    height:100px;
    font-size: 16px;
    left: 0;
    display:none;
}

JavaScript

$(document).ready(function () {

    $(".kwadraty-post2").hover(function () {
        $(".kwadraty-post2 p").toggle("slow");
        $(".kwadraty-post2 img").animate({
            opacity: 1
        });
    }, function(){
        $(".kwadraty-post2 p").toggle("slow");
        $(".kwadraty-post2 img").animate({
            opacity: 0.5 
        });
    });

});