JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 hotspot-wrapper">
    <img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
    <div class="hotspot-text">
      HOTSPOT TEXTf
    </div>
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 hotspot-wrapper">
    <img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
    <div class="hotspot-text">
      HOTSPOT TEXTf
    </div>
  </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 hotspot-wrapper">
    <img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
    <div class="hotspot-text">
      HOTSPOT TEXTf
    </div>
  </div>
</div>

CSS

.col-lg-4 ,.col-md-4,col-sm-4,col-xs-4{
    padding-left:0px;
    padding-right:0px;
}
.hotspot-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom:20px;
}
.hotspot-text {

    height: 102px;
    position: absolute;
    bottom: -50px;
    left:0;
  right:0;
    transition: all 0.2s ease;
    background: rgba(0,0,0,.7);
    color:#fff;
}  
.hotspot-wrapper:hover .hotspot-text {
  bottom: 0;
  left:0;
  right:0;
}
.hotspot-wrapper img {
    max-width:100% !important;
    clear:both;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.hotspot-wrapper:hover img {
  -webkit-transform:scale(1.1);
transform:scale(1.1);
}