Верстка текущего элемента галереи

Question

.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

Answer 1

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>

БЛОГ НА HUSL

Верстка текущего элемента галереи

Ответы (1 шт):