Bootstrap simple grid layout with text hover on image

<div class="container pt-5">
  <div class="row py-5">
    <div class="col-12 text-center">
      <p class="text-muted mb-2">Our design projects are fresh and simple and will benefit your
        business greatly.</p>
      <h2 class="mb-4 h1 font-weight-bold">Super clean user interface for easier use.</h2>
      <p class="mb-5 lead">Lost the plot cracking goal give us a bell is bog horse play
        knackered lemon squeezy, cup of char cack bleeder matie
        boy he lost his bottle. Our design projects are fresh and simple and will benefit your
        business greatly.</p>
      <div class="card-columns">
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-two.jpg" alt="Avatar" class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-three.jpg"  class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-four.jpg"  class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-five.jpg"  class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-six.jpg"  class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="image-overlay2"> <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-seven.jpg"  class="image2">
            <div class="middle2 d-flex align-items-center justify-content-center">
              <div class="text2"> Image Title </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-5"> <a href="" class="btn btn-outline-danger btn-lg"> CALL TO ACTION </a> </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}
.btn {
    padding: 14px 26px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-danger {
    background-color: #e34c43;
    border-color: #e34c43;
}
.image-overlay2 {
    position: relative;
}
.card{
border-radius:4px;
border:0;    
}
.image2 {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius:4px;
    transition: .5s ease;
    backface-visibility: hidden;
}
.middle2 {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.image-overlay2:hover .image2 {
    opacity: 0.3;
    cursor: pointer;
}
.image-overlay2:hover .middle2 {
    opacity: 1;
    cursor: pointer;
}
.text2 {
    color: #222;
    font-size: 22px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
.card-columns {
    column-count: 3;
  }    
@media(max-width:1024px){
.card-columns {
    column-count: 2;
  }    
}
@media(max-width:600px){
.card-columns {
    column-count: 1;
  }    
}