JSFiddle - React, Tailwind, and code Playground

by arvind07

HTML

<div class="section-item-portal">
    <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>
</div>

CSS

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
}
.section-text {
	position: absolute;
	width: 217px;
	background-color: rgba(0,0,0,0.53);	
	color: #fff;
	padding: 10px;
}

JavaScript

$(document).ready(function () {

    $('.section-text').hide();
    
    $('.section-item-portal').mouseenter(function () {
        $(this).children('.section-text').fadeIn();
    });

    $('.section-item-portal').mouseleave(function () {
        $(this).children('.section-text').fadeOut();
    });

});