JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="case-container">
<div class="case-item" id="c1">
  
<div class="case-label">
<h2>Title 1</h2>
</div>

</div>

<div class="case-item" id="c2">
  
<div class="case-label">
<h2>Title 2</h2>
</div>

</div>
<div class="case-item"></div>
<div class="case-item"></div>
<div class="case-item"></div>
<div class="case-item"></div>
</div>

CSS

.case-container {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}

.case-item {width:270px;height:270px;background-color:#cccccc;background-position: 0px 0px;margin:10px;background-position: center center;background-repeat: no-repeat;position:relative;transition: All 0.3s ease-out;cursor:pointer;}

.case-item:hover .case-label {height:100px;transition: All 0.3s ease-out;}

#c1 {background-image:url(image); }
#c2 {background-image:url(image); }

.case-label h2 {margin:0;text-align:center;font-family:Arial;font-weight:normal;font-size:20px;color:#eeeeee;position: absolute;width:100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.case-label {position:absolute;left:10px;right:10px;bottom:10px;background-color:#1668B0;height:70px;overflow:hidden;transition: All 0.3s ease-out;}