I'm trying to have a paragraph of text appear next to each image after I pick it. Currently, all I have is the image showing up after I click it. I don't know how to add text next to the image that only shows up when it is clicked on. I'm new to programming so anything could help. If you guys need more information, let me know. Thanks.

```js
function myFunction(imgs) {
   var expandImg = document.getElementById("expandedImg");
   var imgText = document.getElementById("imgtext");
   expandImg.src = imgs.src;
   imgText.innerHTML = imgs.alt;
   expandImg.parentElement.style.display = "block";
}
```

```css
@font-face {
    font-family: 'futuralight';
    src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'tekoregular';
    src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'playfair_displayregular';
    src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'poppinsmedium';
    src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .topnav {
    background-color: rgb(84, 104, 217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight: 900;
  }

  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left: 2%;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

  .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }

  .topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s;
  }
  .column {
    float: left;
    width: 25%;
    padding: 10px;
  }

  /* Style the images inside the grid */
  .column img {
    opacity: 0.85; 
    cursor: pointer; 
  }

  .column img:hover {
    opacity: 1;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* The expanding image container */
  .container {
    position: relative;
    display: none;
    width:50%;
  }

  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }

  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }
  .row{
    position: absolute;
    top:600px;
  }
  .testtext{
    color:black;
    background-color: grey;
  }
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />
    <script src='../Javascript/script.js'></script>
    <title>Projects</title>
</head>
<body>
    <header class="topnav" id="topnav">
        <a class="link" href="../index.html">Home</a>
        <a class="link" href="#Academics">Academics</a>
        <a class="active-menu" href="projects.html">Projects</a>
        <a class="link" href="communityservice.html">Community Service</a>
      </header>
      <div style="text-align:center">
        <h2>Tabbed Image Gallery</h2>
        <p>Click on the images below:</p>
        <div class="container">
          <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
          <img id="expandedImg" style="width:100%">
          <div id="imgtext"></div>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
          <img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897" alt="Snow" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
          <img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
          <img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
        </div>
      </div>

</body>
</html>
```