如何通过悬停在图像顶部显示描述

Question

我有8个图像，它有描述每一个，我希望当我悬停每一个按钮内的图像描述将显示在上面。老实说，我已经花了好几天时间在这些问题上，试图用我自己的方式来解决它，但仍然无法解决。任何帮助都将不胜感激。

PS:我这里只有两个按钮，因为我还没有完成设计。请不要对图像的重复描述感到困惑。

​

.section-feature {

    padding-top: 0;
}
.feature-showcase {
    list-style: none;
    width: 100%;
}
.feature-showcase li {
    display: block;
    float: left;
    width: 25%;
}
.features-photo {
    width: 100%;
    margin:0;
    overflow: hidden;
    background-color: #000;

}
.features-photo img {
	position: relative;
	opacity:0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s,  opacity 0.5s;
    
}
.features-photo img:hover {
    opacity: 1;
    transform: scale(1.04)
}
.btn,
.btn1{
    position: absolute;
    top: 40%;
    left: 8%;
    transform: translate(200%,3200%);
    background-color: rgba(0, 0, 0, 0.33);
    color: #ffffff;
    z-index: 1;
    font-size: 16px;
    padding: 12px 24px ;
	outline: none;
    border: none;
    cursor: pointer;
    border-radius: 15px;
    text-align: center;
}
.btn1 {
    position: absolute;
    top: 27%;
    left: 16.5%;
	transform: translate(500%, 3400%);

}


 .btn:hover {
    background-color: black;
	opacity: 1;
}
 .btn1:hover {
    background-color: black;
	
}


 .long-copy {
	 z-index: 1;
	 display: none;
	background-color: rgba(186, 168, 172, 0.21); 
	color: #fcf5f5;
	 letter-spacing: 1px;
	line-height: 145%;
	 float: left;

}
  .btn:hover ~ figcaption{
		display: block;  

            
}

    <section class="section-feature">
	
		<button class="btn">Info</button>
		
    <ul class="feature-showcase">
        <li>
        <figure class="features-photo">
            <img src="resources/images/Real%20Time%2001.jpg" alt="real-time">
					<figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>  
            </figure>
        </li>

				
 <li>
		
<figure class="features-photo">
			
<button class="btn1">Info</button>
				
<img src="resources/images/Overspeeding.jpg" alt="Overspeeding">
			     <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>      
        </li>
        
        
 <li>
 <figure class="features-photo">
 <img src="resources/images/Driver%20Identification%2001.jpg" alt="Driver Identification">
			   <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
       </figure>         
        </li>
        
        
 <li>
<figure class="features-photo">
 <img src="resources/images/Fuel%20Management.jpg" alt="Fuel Management">
			          <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
  
  <li>
 <figure class="features-photo">
   <img src="resources/images/Maintenance.jpg" alt="Maintenance">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>        
        </li>
        
  <li>
  <figure class="features-photo">
  <img src="resources/images/Accident%20Data.jpg" alt="Accident">
			                  <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>  
        </li>
                 
<li>
<figure class="features-photo">
<img src="resources/images/Geofencing%20.jpg" alt="Geofencing">
			 <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
                 
                 
  <li>
  <figure class="features-photo">
 <img src="resources/images/Journey%20Management.jpg" alt="Journey Management">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>           
        </li>
        </ul>
    
    </section>

​

Answer 1

我试图用您的代码做一些事情，但我决定从头开始。

以下是两个例子：

• 纯CSS和HTML (但它看起来不适合大的描述)
• 通过JS (使用模式弹出作为解决方案)

CSS和

​

* {
  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>

​

JS解决方案(带有模态弹出)

我认为这是更方便的方式来渲染更多的卡片，你想。您只需要在一个地方更改代码，而且代码在任何地方都会发生变化。当然，在反应上，它会更强大，但是这个方法也不像纯CSS和HTML解决方案那么糟糕。

​

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>

​