css3 滑过图片变暗

CSS3在网页应用中有着广泛的应用，其中之一就是实现滑过图片变暗的效果。通过CSS3的opacity属性和: hover伪类实现，能够为我们的网页增添美观的元素。


/*HTML*/
<div class="image-container">
  <img src="example.jpg">
  <div class="overlay"></div>
</div>

/*CSS*/
.image-container{
  position: relative;
  width: 300px;
  height: 200px;
}

.image-container img{
  width: 100%;
  height: 100%;
}

.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.5);
  opacity: 0;
  transition: .5s ease;
}

.image-container:hover .overlay{
  opacity: 1;
}

css3 滑过图片变暗

首先，在HTML中我们需要一个包含图片的容器以及一个覆盖在图片上方的div。在CSS中，我们为容器设置position: relative属性，并设置宽高为300px和200px。同时，为图片设置宽高100%以适应容器大小。

接着，我们为覆盖在图片上方的div设置position: absolute属性，并设置top、left、width、height以及rgba颜色属性来实现半透明黑色覆盖。在初始状态下，我们将opacity属性设置为0，使div在未被滑过时不可见。

最后，我们为.image-container:hover .overlay选择器添加样式，将opacity属性设置为1，使滑过图片时div变得不透明，覆盖在图片上方，实现了滑过图片变暗的效果。

通过以上代码，我们可以轻松实现滑过图片变暗的效果，使我们的网页更加美观动人。

css3 滑过图片变暗

相关文章