Показать блок с текстом, отодвинув изображение

Question

Как показать блок с текстом, при этом наполовину отодвинув изображение вправо в общем контейнере? Вот мой код:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: mediumvioletred;
}

.box {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.image {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
}

.descript {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 16px;
  background-color: white;
}

.title h1,
.text p {
  margin: 20px 10px;
}

<div class="box">
  <div class="descript">
    <div class="title">
      <h1>Маникюр</h1>
    </div>
    <div class="text">
      <p>Красивый дизайн маникюра на топ-10 трендов: лучшие новинки модного маникюра 2020-2021. Самый красивый маникюр в разных техниках.</p>
    </div>
  </div>
  <div class="image">
    <img src="https://zelenograd24.ru/upload/iblock/ece/ece5c3ee6d8206b2edffe383d7ff073a.jpg" alt="">
  </div>
</div>

Answer 1

Как вариант + немного импровизации:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: mediumvioletred;
}

.box {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: brown;
}

.image {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  transition: transform .6s ease;
}

.image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.descript {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 20px;
  background-color: white;
  transform-origin: left;
  transform: perspective(400px) rotateY(90deg);
  transition: transform .6s ease;
}

.box:hover .descript {
  transform: rotateY(0deg);
}

.box:hover .image {
  transform: translateX(50%);
}

.title h1,
.text p {
  margin: 20px 10px;
}

<div class="box">
  <div class="descript">
    <div class="title">
      <h1>Маникюр</h1>
    </div>
    <div class="text">
      <p>Красивый дизайн маникюра на топ-10 трендов: лучшие новинки модного маникюра 2020-2021. Самый красивый маникюр в разных техниках.</p>
    </div>
  </div>
  <div class="image">
    <img src="https://zelenograd24.ru/upload/iblock/ece/ece5c3ee6d8206b2edffe383d7ff073a.jpg" alt="">
  </div>
</div>

БЛОГ НА HUSL

Показать блок с текстом, отодвинув изображение

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