ホバーして画像の上に説明を表示する方法

* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  z-index: 100;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 1px 1px 1px #d3d3d3;
}

.btn:hover+.description {
  opacity: 1;
}

.description {
  opacity: 0;
  color: black;
  font-size: 15px;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>

var data = [{
    id: "1",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "2",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "3",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "4",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "5",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "6",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "7",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "8",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  }
];

// Making image card
function createCard(src, description, id) {
  // Container
  var container = document.createElement("div");
  container.classList.add("container");
  container.setAttribute("id", id);

  // Image
  var image = document.createElement("img");
  image.classList.add("image");
  image.setAttribute("alt", "Avatar");
  image.setAttribute("src", src);

  // button
  var btn = document.createElement("div");
  btn.classList.add("btn");
  var btnText = document.createTextNode("info");
  btn.appendChild(btnText);

  // Description
  var descr = document.createElement("div");
  descr.classList.add("description");
  var descriptionText = document.createTextNode(description);
  descr.appendChild(descriptionText);

  container.appendChild(image);
  container.appendChild(btn);
  container.appendChild(descr);

  return container;
}

window.onload = function() {
  var app = document.getElementById("app");

  // Fill the app with cards based on your data
  data.map(function(item) {
    app.appendChild(createCard(item.src, item.description, item.id));
  });

  var btns = document.body.querySelectorAll(".btn");

  btns.forEach(function(btn, index) {
    btn.addEventListener("click", function(e) {
      var description = event.target.nextSibling.innerText;
      document.getElementById("description").innerText = description;

      document.getElementById("description").style.fontSize = "10px";

      // Get the modal
      var modal = document.getElementById("myModal");

      modal.style.display = "block";

      // Get the <span> element that closes the modal
      var closeModal = document.getElementsByClassName("close")[0];
      closeModal.onclick = function() {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    });
  });
};

* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.btn:hover+.description {
  opacity: 1;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
}

.description {
  text-align: center;
  height: auto;
  //opacity: 0;
  color: black;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div id="app"></div>

<!-- Card looks like this -->
<!--div class="container">
  <img src="#" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description"></div>
</div-->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="description">Some text in the Modal..</p>
  </div>

</div>