Реализовать два блока, имитирующие кулисе, при наведении появляется текст

Question

    <div class="box">
    <div class="Box1"><kbd>Box1</kbd></div>
    <div class="Box2"><kbd>Box2</kbd></div>
</div>

Сss

    * {box-sizing: border-box;}
body {font-family: 'Playfair Display', serif; margin: 0;text-align: center}
kbd {font-size: 0.9em;display:inline-block;line-height:1.1;}
.Box1 {
    width: 50%;
    margin: 0 auto 40px;
    position: relative;
}
.Box1 {
    width: 100px;
    height: 100px;
    background-color: #5c78e0;
    margin: 0 auto;
    position: relative;
    left: 50px;
}
.Box1:hover {
    left: -50px;
}
div{
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
.Box2 {
    width: 50%;
    margin: 0 auto 40px;
    position: relative;
}
.Box2 {
    width: 100px;
    height: 100px;
    background-color: #5c78e0;
    margin: 0 auto;
    position: relative;
    left: 50px;
}
.Box2:hover {
    left: -50px;
}

Answer 1

Как пример, идея для дальнейшего развития воображения, творчества и фантазии

.box {
  position: relative;
  width: 100%;
  height: 80vh;
  perspective(500px)
}

.box__left,
.box__right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #2cdfd9;
  border: 4px solid #087573;
  transition: all 1s;
}

.box__left {
  left: 0;
  transform: perspective(0px) rotateY(0deg) scale(1);
}

.box__right {
  right: 0;
  transform: perspective(0px) rotateY(0deg) scale(1);
}

.text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 80vh;
  color: green;
  font-size: 1px;
  transition: all 1.5s;
}

.box:hover .box__left {
  left: -25px;
  transform: perspective(100px) rotateY(35deg) scale(0.5);
}

.box:hover .box__right {
  right: -25px;
  transform: perspective(100px) rotateY(-35deg) scale(0.5);
}

.box:hover .text {
  font-size: 8vh;
}

<div class="box">
  <div class="text">Какой-то текст</div>
  <div class="box__left"></div>
  <div class="box__right"></div>
</div>

БЛОГ НА HUSL

Реализовать два блока, имитирующие кулисе, при наведении появляется текст

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