JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="imagebox">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
       
      </div>
       <div class="text-center">
       <div class="offset-md-3 triangle-up">
        
        </div>
       </div>
      <div class="comments">
      
      </div>
    </div>
    <div class="col-sm-4">
      <div class="imagebox">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="imagebox">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
      </div>
    </div>
  </div>
</div>

CSS

.imagebox {
  padding: 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
    border-radius: 8px

}

.imagebox .imagebox-desc {
  background-color: #ffffff;
  bottom: 0px;
  color: #000000;
  font-size: 1.2em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: center;
  width: 100%;
  opacity: 0.5;

}

.imagebox:hover img {
  opacity: 0.9;
}

.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
  opacity: 0.9;
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid #cccccc;
}