Responsive side-by-side images with overlay text when hovering

I'd like to have a header and then three images side-by-side. When in small screens, the images should occupy all the width and be placed vertically one after another.

For each image, when the mouse is over it, some text should be overlayed. For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.

Each of the images should point to another html page (not shown in my example.

What I managed to do until now is:

<!DOCTYPE html>
<html>

<head>
<style>
html {
  font-family: helvetica, arial, sans-serif;
}
.cabecalho {
    width:70%;
    height:200px;
    text-align:center;
    margin:70px;
    margin-top:10px;
}
.cabecalho p{
  line-height: 10px;   /* within paragraph */
  margin-bottom: 4px; /* between paragraphs */  
}
.corpo {
    width:60%;
    height:500px;
}
* {
  box-sizing: border-box;
}


.img__description_layer {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(204, 204, 204, 0.6);
  color: #111;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pad: 8px;
  height: 300px;
  width: 200px;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}
.img__wrap:hover .img__description {
  transform: translateY(0);
}
.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}
</style>

</style>
</head>

<body>
    <div class="cabecalho">
    <header>
    </header>
    </div>

    <main>
        <div class="row">
            <div class="column">
                <div class="img__wrap">
                <img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width:100%">
                <div class="img__description_layer">
                    <p class="img__description">Some paragraph</p>
                </div>
                </div>
            </div>
            <div class="column">
                <div class="img__wrap">
                <img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
                <div class="img__description_layer">
                    <p class="img__description">Some paragraph</p>
                </div>

                </div>
            </div>
            <div class="column">
                <div class="img__wrap">
                <img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
                <div class="img__description_layer">
                    <p class="img__description">Some paragraph</p>
                </div>
                </div>
            </div>


        </div>
    </main>
</body>
</html>

I'd appreciate some help on this.