css - How do I add over on text to this image grid in HTML?

Question

I know this is really messy (I'm a beginner, sorry!) but could you help me add hover over text onto my images in my image grid? Thank you. It is for a project I am working on.....

I want this text to also be able to have a hyperlink in it to take you to another page on the website.

imgur link

It keeps telling me my post is mostly code so unsure what else to say.....

-

  body {
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: #111;
}

ul.topnav li a.active {
  background-color: #C62828;
}

ul.topnav li.right {
  float: right;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox;
  /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  overflow: hidden;
}


/* Create five equal columns that sits next to each other */

.column {
  -ms-flex: 12.5%;
  /* IE10 */
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 24px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>Interesting Portraits</h2>

</div>

<!-- Photo Grid --ASPECTRATIO--151:200--->
<div class="row">
  <div class="column">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/John_De_Critz_James_I_of_England_c._1605.jpg/680px-John_De_Critz_James_I_of_England_c._1605.jpg" style="width:100%" alt="James I of England">
  </div>


  <div class="column">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Charles_I_%28Prince_of_Wales%29.jpg" style="width:100%">
  </div>


  <div class="column">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Oliver_Cromwell_by_Samuel_Cooper_%282%29.jpg" style="width:100%">
  </div>


  <div class="column">
    <img src="https://i.imgur.com/MDwm2X0.jpg" style="width:100%">
  </div>


  <div class="column">
    <img src="" style="width:100%">

    <img src="" style="width:100%">
  </div>


  <div class="column">
    <img src="" style="width:100%">

    <img src="" style="width:100%">
  </div>


  <div class="column">
    <img src="" style="width:100%">
  </div>


  <div class="column">
    <img src="" style="width:100%">
  </div>


</div>

question from:https://stackoverflow.com/questions/65645884/how-do-i-add-over-on-text-to-this-image-grid-in-html

Answer 1

Waitting for answers