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

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 和 HTML

* {
  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解决方案(带模态弹窗)

我认为这是渲染任意数量卡片的更方便的方式。您只需要在一个地方更改代码，它就会在所有地方发生变化。当然在 React 中它会更强大，但这种方法也没有纯 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>