主页 / 问题 / 1125044
Accepted
Yaroslav Bondar
Asked:2020-05-13 23:32:47 +0000 UTC2020-05-13 23:32:47 +0000 UTC

当前画廊元素的布局

  • 772

需要使用 html 和 css 显示图片库的当前元素，如带有“眼睛”的图片

.gallery__row {
  display: flex;
  flex-direction: row;
}

.gallery__column {
  display: flex;
  flex-direction: row;
}

.gallery__current:hover {
  position: relative;
  background: linear-gradient(0deg, rgba(52, 84, 122, 0.8), rgba(52, 84, 122, 0.8)), url(../img/gallery/02.jpeg);
  z-index: -2;
}
<div class="gallery__img">
  <div class="gallery__row">
    <div class="gallery__column">
      <img src="img/gallery/01.png" width="480" height="480" alt="01">
      <div class="gallery__current"><img src="img/gallery/02.jpeg"             width="480" height="480" alt="02"></div>
      <img src="img/gallery/01.png" width="480" height="480" alt="01">

    </div>
  </div>
</div>

有必要使用 html 和 css 在悬停时显示当前画廊元素，如图所示

html

1 个回答

  1. Best Answer

    img {display: block}

.gallery__column {
  display: flex;
}

.gallery__current::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://lh3.googleusercontent.com/proxy/YmLrs9iwolqzRAvUcxHTZuuGBc_g0Vpor1XcW8xmnsE-XXVqdInOjjalxc_6r3Bs7qiv1QdNE_P16eI103MsfrWBc_3EukpOsktZcmUvYQOqNRXkb1PPuU2mSuDCemvgMt2fe2dK-8_fGWqL), linear-gradient(0deg, rgba(52, 84, 122, 0.8), rgba(52, 84, 122, 0.2));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40%, 100%;
  transition-duration: 0.2s;
  opacity: 0;
}

.gallery__current:hover::after {
  opacity: 1;
}

.gallery__current {
  position: relative;
}
    <div class="gallery__column">
  <div class="gallery__current">
    <img src="https://picsum.photos/280" alt="02">
  </div>
</div>

    • 0

相关问题