时间戳

首页 > 解决方案 > 将文本悬停在带有图像的 div 上

javascript - 将文本悬停在带有图像的 div 上

问题描述

我有这个代码：

<!DOCTYPE html>
<html lang="pl">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link href="assets/css/bootstrap.min.css" rel="stylesheet">
      <script src="assets/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 profil_zd">
         <div class="profil_zd_1"><a href="pl/Zdjecie/12"><img src="assets/uploads/posts/t4G9Q23vJrXOfBkHEYx0MbsycWd6gwo5Vjla7UnLKApZS18qDINTimPhuReC.jpg" class="img-responsive center profil_zd_2 profil_zd_2XXX"></a></div>
         <div class="middleImage">
            <div class="post-info">254</div>
            <div class="text">name and surname<img src="assets/images/ikon22.png" class="deleteMyAccount " id=""></div>
         </div>
      </div>
      <style>
         .middleImage {
         transition: .5s ease;
         opacity: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         text-align: center;
         }
         .profil_zd_1:hover .profil_zd_2XXX {
         opacity: 0.5;
         }
         .profil_zd_1:hover .middleImage {
         opacity: 1;
         }
         .profil_zd_2 {
         border-radius: 25px;
         }
         style.css:135.center {
         margin: 0 auto;
         }
      </style>
   </body>
</html>

权限： http : //serwer1356363.home.pl/pub/rrrrr/ 我需要什么：http ://serwer1356363.home.pl/pub/rrrrr/sample.png

我需要悬停效果（将鼠标悬停在照片上后），必须显示带有语音数量和文本（用于示例）的图片。有谁知道如何修复我的代码？

标签： javascriptcss

解决方案

对于图像上的文本叠加，您可以按照w3schools中的这个简单过程进行操作：

.outer {
  background-color: #000000;
  width: 90vw;
  padding: 100px;
}
.container {
  position: relative;
  width: 50%;
  border: 5px solid white;
}

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

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<div class="outer">
  <div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

推荐阅读