JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cascade-t1">
  <div class="overlay-t1"></div>  
  <div class="cascade-corner">Info</div>  
  <div class="cascade-overlay-content">
    <h2>Cool Text</h2>
    <p class="tilefont">This is some cool text about the building that I wanted to add in. I will stop writing it now if you want.</p>
  </div>
</div>

CSS

p.tilefont{font-size:15px;}
.cascade-t1 {
  background: url('http://www.studios.com/FILE/2629.jpg');
  padding-left:10px;
  width: 228px;
  height: 240px;
  overflow: hidden;
  position: relative;
}
.cascade-t1 .overlay-t1 {
  border-bottom: 800px solid #b263a3;
  border-left: 800px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  left: 130px;
  text-indent: -9999px;
  width: 0;
}

.cascade-t1 .cascade-corner {
  bottom: 15px;
  color: #fff;
  font-size:15px;
  position: absolute;
  right: 15px;

}

.cascade-t1 .cascade-overlay-content {
  bottom: 0;
  color: #fff;
  left: 0;
  display: none;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
 
}
.cascade-t1 .cascade-overlay-content h2 {
  border-bottom: 1px solid #fff;
  padding: 0 0 12px;
}

JavaScript

$(".cascade-t1").hover(function(){
   $(".cascade-corner").fadeOut();
    $(".overlay-t1").animate({"left": "-300px"}, 300, function(){
        $(".cascade-overlay-content").fadeIn(200);    
    });
    
    
}, function(){

   $(".cascade-corner").fadeIn();
    $(".cascade-overlay-content").fadeOut(200, function(){
        $(".overlay-t1").animate({"left": "130px"}, 300);    
    });

});