时间戳

首页 > 解决方案 > 如何制作与图像大小完全匹配的 div 叠加层

javascript - 如何制作与图像大小完全匹配的 div 叠加层

问题描述

我正在创建一个网站，并希望用户能够将鼠标悬停在图像上并获取有关图像的更多信息。我可以正常工作，但我无法弄清楚如何使未选择的其他图像变暗。理想情况下，我想使用与响应式图像的尺寸完全匹配的 html 和 css 创建一个覆盖 div。当不悬停在此覆盖 div 上时，将使用透明颜色使图像变暗一点。如何使这个 div 响应图像？

这是我的代码笔，看看我在说什么 https://codepen.io/klaurtar/pen/NJgrOR

.overlay {
    width: 55%;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);

    z-index: 10;

    &--p1 {
        left: 0;
        top: -2rem;
        height: 20rem;
    }

    &--p2 {
        right: 0;
        top: 2rem;
        height: 20rem;
    }

    &--p3 {
        left: 20%;
        top: 10rem;
        height: 22rem;
    }
}

标签： javascripthtmlcsssass

解决方案

.wrapper {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  z-index: 1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: #000;
  opacity:0.8;
}
<div class="wrapper">
  <img src="https://unsplash.it/320/240" />
  <div class="overlay"></div>
</div>

推荐阅读