Одно фото поверх другого

Question

Нужно сделать вот так.

.main__img {
    float: right;
    border-radius: 5px;
    transform: rotate(7deg);
}

.main__img2 {
    position: absolute;
    right: 0;
    opacity: 80%;
    border-radius: 5px;
}

А получается вот так.

z-index пробовал добавлять, результат тот же.

Как бы вы сделали этот блок?

Answer 1

.main__img {
    position: absolute;
    right: 0;
    z-index: 1;
    opacity: 80%;
    border-radius: 5px;
}

.main__img2 {
    position: absolute;
    right: 0;
    z-index: 2;
    transform: rotate(7deg);
    border-radius: 5px;
}

Answer 2

Попробовал сделать тоже через наложение и z-index. Не нравится, правда, что адрес картинки надо в двух местах прописывать.

html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.image-container {
  position: relative;
  height: 200px;
  aspect-ratio: 3 / 4;
  transform: rotate(10deg);
  transform-origin: 10% 10%;
  transition: transform .5s
}

.image-container::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transform: rotate(-7deg);
  transform-origin: 30% 0%;
  transition: transform .5s;
  background: url(https://i1.silvergames.com/j/b/nyan-cat.jpg) no-repeat center / cover;
  opacity: .7;
}

.image-container:hover {
  transform: rotate(0);
}

.image-container:hover::before {
  transform: rotate(0);
}

<div class="image-container">
  <img class="image" 
       src="https://i1.silvergames.com/j/b/nyan-cat.jpg" 
       alt="Nyan Cat">
</div>

БЛОГ НА HUSL

Одно фото поверх другого

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