时间戳

首页 > 解决方案 > css 动态叠加鼠标悬停不透明度

html - css 动态叠加鼠标悬停不透明度

问题描述

我们正在努力让我们的新公司团队页面启动并运行。我们正在尝试完成的是让员工图像<divs>动态调整大小，然后在鼠标悬停时使图像变暗并且员工简历可见。类似于此处找到的员工鼠标悬停的东西：http: //studiompls.com/about/

那些拼凑在一起的作品：

<!DOCTYPE html>
<html>
<head>
<style>

div.gallery {
    position:relative;
     background: #6E6E6E;
     color: #fff; 
     font-weight:bold;
     top:0;
     left:0;
     opacity: 1;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;


}

div.gallery:hover {
   opacity: .6;
       -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -ms-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
       transition: opacity .25s ease-in-out;

}

div.gallery img {
    width: 100%;
    height: auto;
}



div.desc {
   position: relative;
         top: 50%;
         transform: translateY(-50%);
         vertical-align:middle;

}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
    vertical-align:middle;
    position:relative;


}
.responsive:hover{

}


@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.wrapper{

     position:relative;
     background: #6E6E6E;
     color: #fff; 
     font-weight:bold;
     top:0;
     left:0;
     opacity: 1;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
}
.wrapper:hover{
    opacity: .6;
       -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -ms-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
       transition: opacity .25s ease-in-out;
}
</style>
</head>
<body>
<div class="responsive">
<div class="wrapper">
  <div class="gallery">
      <img src="images/Gary.jpeg" alt="" width="300" height="200">
  </div>
  </div>
   </div>
<div class="responsive">
<div class="wrapper">
  <div class="gallery">
      <img src="images/Andy.jpeg" alt="" width="300" height="200">
    </div>
  </div>
</div>
<div class="responsive">
<div class="wrapper">
  <div class="gallery">
      <img src="images/Chris.jpg" alt="" width="300" height="200">
    </div>
  </div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="wrapper">
<div class="gallery">
<div class="clearfix"></div>
<div style="padding:6px;">
</div>
</body>
</html>

覆盖<div>的 s 不会保持排列，如果我们在背景中添加文本，<div>它会将它们进一步分开。有人看到这里缺少什么吗？

标签： htmlcss

解决方案

试试这个 HTML 和 CSS

额外的 CSS

 .container {
position: relative;

}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
    height: 100%;
    width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
background-color: black;
}

.text {
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

更新的 HTML

<div class="gallery container">
    <img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
    <div class="middle">
       <div class="text">John Doe</div>
    </div>
</div>

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container1 {
   display: flex;
flex-wrap: wrap;
}
 div.gallery {
     position:relative;
     background: #6E6E6E;
     color: #fff; 
     font-weight:bold;
     top:0;
     left:0;
     opacity: 1;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
     }
     div.gallery:hover {
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
     }
     div.gallery img {
     width: 100%;
     height: auto;
     }
     div.desc {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     vertical-align:middle;
     }
     * {
     box-sizing: border-box;
     }
     .responsive {
     padding: 0 6px;
     width:33.3%;;
     vertical-align:middle;
     position:relative;
     }

     @media only screen and (max-width: 700px) {
     .responsive {
     width: 49.9%;
     margin: 6px 0;
     }
     }
     @media only screen and (max-width: 500px) {
     .responsive {
     width: 100%;
     }
     }
     .clearfix:after {
     content: "";
     display: table;
     clear: both;
     }
     .wrapper{
     position:relative;
     background: #6E6E6E;
     color: #fff; 
     font-weight:bold;
     top:0;
     left:0;
     opacity: 1;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
     }
     .wrapper:hover{
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
     }
     
     
.container {
position: relative;

}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
height: 100%;
width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
background-color: black;
}

.text {
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>


   <body>
 <div class="container1">
  <div class="responsive">
     <div class="wrapper">
        <div class="gallery container">
           <img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
           <div class="middle">
                <div class="text">John Doe</div>
          </div>
        </div>
     </div>
  </div>
  <div class="responsive">
     <div class="wrapper">
        <div class="gallery container">
           <img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
           <div class="middle">
                <div class="text">John Doe</div>
          </div>
        </div>
     </div>
  </div>
  <div class="responsive">
     <div class="wrapper">
        <div class="gallery container">
           <img class="image" src="https://www.w3schools.com/howto/img_avatar.png" width="300" height="200">
           <div class="middle">
                <div class="text">John Doe</div>
          </div>
        </div>
     </div>
  </div>
  <div class="clearfix"></div>
  <div class="responsive">
  <div class="wrapper">
  <div class="gallery">
  <div class="clearfix"></div>
  <div style="padding:6px;"></div>
</div>
</body>
</html>

推荐阅读