JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <img src="http://placekitten.com/300/200">
  <div id="cover">Title
    <div id="arrow" class="open"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dolor sapien, elementum in sollicitudin quis, placerat eu odio elementum in sollicitudin quis, placerat eu odio</p>
  </div>
</div>

CSS

#container{
	height: 200px;
	width: 300px;
	position:relative;
	overflow:hidden;
}
#cover{
	height: 200px;
	width: 300px;
	position:absolute;
	top:170px;
	left:0px;
	background-color:rgba(0,0,0,0.4);
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
}

.open{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #ffffff;
	position:absolute;
	top: 7px;
	right: 15px;
}

.close{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #ffffff transparent transparent transparent;
	position:absolute;
	top: 7px;
	right: 15px;
}
#cover p{
	display: block;
	height: 150px;
	width: 280px;
	position: absolute;
	top: 32px;
	left: 10px;
	color:#FFF;
	text-align: justify;
}

JavaScript

$(document).ready(function(){
	var count=1;
	$('#arrow').hover(function(){
		count++;
		if (count%2 == 0){
			$('#cover').animate({'top':'0px'},500);
			$(this).removeClass('open').addClass('close');
			}else{
				$('#cover').animate({'top':'170px'},500);
				$(this).removeClass('close').addClass('open');
			};
		});
})