JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

  <div class="row">

    <div class="col-sm-4">

      <div class="single-girl">
        <a href="#">
          <div class="verified">
            <img src="http://upload.akusherstvo.ru/image1171624.png" alt="">
          </div>

          <div class="girl-info">
            <img class="img-responsive" src="http://upload.akusherstvo.ru/image1171620.png" alt="">
            <div class="girl-bottom">
              <span>NAME</span>
              <address>Address</address>
            </div>


          </div>

          <div class="overlay-girl">
            <span>TEXT</span>
          </div>
        </a>
      </div>

    </div>

    <div class="col-sm-4">

      <div class="single-girl">
        <a href="#">
          <div class="verified">
            <img src="http://upload.akusherstvo.ru/image1171624.png" alt="">
          </div>

          <div class="girl-info">
            <img class="img-responsive" src="http://upload.akusherstvo.ru/image1171620.png" alt="">
            <div class="girl-bottom">
              <span>NAME</span>
              <address>Address</address>
            </div>
          </div>

          <div class="overlay-girl">
            <span>TEXT</span>
          </div>
        </a>
      </div>

    </div>

    <div class="col-sm-4">

      <div class="single-girl">
        <a href="#">
          <div class="verified">
            <img src="http://upload.akusherstvo.ru/image1171624.png" alt="">
          </div>

          <div class="girl-info">
            <img class="img-responsive" src="http://upload.akusherstvo.ru/image1171620.png" alt="">
            <div class="girl-bottom">
              <span>NAME</span>
              <address>Address</address>
            </div>
          </div>

          <div class="overlay-girl">
            <span>TEXT</span>

          </div>
        </a>
      </div>

    </div>

 ...

CSS

.container {
  padding: 20px;
  background-color: red;
}

.single-girl {
  position: relative;
  background-color: beige;
}

.single-girl a {
  text-decoration: none;
}

.girl-info img {
  padding: 3%;
}

.single-girl .overlay-girl {
  bottom: 0;
  left: 0;
  height: 35%;
  right: 0;
  width: 100%;
  opacity: 0;
}

.overlay-girl {
  display: block;
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
  -webkit-transition: all 0.65s;
  -moz-transition: all 0.65s;
  -o-transition: all 0.65s;
  transition: all 0.65s;
}

.single-girl:hover .overlay-girl {
  opacity: 1;
  height: 100%;
}

.girl-bottom {
  padding: 15px;
  width: 100%;
  z-index: 2;
  background-color: beige;
  position: relative;
}

.girl-bottom span {
  font-size: 16px;
  font-weight: 700;
}

.girl-bottom address {
  margin-bottom: 0;
  font-size: 12px;
  padding-top: 5px;
}

.single-girl .verified {
  position: absolute;
  bottom: -3px;
  right: -3px;
  z-index: 3;
}