2

Нужно сделать так, чтоб при наведении нижний блок вылетал слева на место верхнего блока, и в тоже время верхний блок улетал на право за границы блока. Как такое сделать?

section {
  margin: 20px auto;
  padding: 20px;
  width: 240px;
  background-color: white;
  border: 1px solid #cccccc;
}

.title {
  height: 240px;
  width: 240px;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #cccccc;
  padding-top: 100px;
}

.description {
  height: 240px;
  width: 240px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #333333;
  padding-top: 80px;
}
<section class="works">
  <a class="caption-link">
    <div class="title">Продаем телефоны</div>
    <div class="description">Телефоны всех марок за доступной ценой и для любого метода оплаты.</div>
  </a>
</section>

0

1 ответ 1

6

Первым делом вам нужно скрыть слева ваш второй блок, сделать это можно через абсолютное позиционирование, т.е. родителю задать position: relative и ему же overflow: hidden чтоб они скрывались за границей видимости нашего родителя, а блоку который нужно скрыть position: absolute, потом при наведении на их родителя, задать одному transform: translateX(-n) и второму transform: translateX(n), ну и чтоб было плавно добавить transition: all .4s ease.

Все так как вы хотели?

section {
 margin: 20px auto;
 padding: 20px;
 width: 240px;
 background-color: white;
 border: 1px solid #cccccc;
}

.title {
 height: 240px;
 width: 240px;
 text-align: center;
 box-sizing: border-box;
 font-size: 20px;
 font-weight: bold;
 color: #fff;
 background-color: #cccccc;
 padding-top: 100px;
}

.description {
  height: 240px;
  width: 240px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #333333;
  padding-top: 80px;
 }
 
 .caption-link {
display: block;
overflow: hidden;
position: relative;
}

.title {
transition: all .4s ease;
}

.description {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: all .4s ease;
}

.caption-link:hover .description {
transform: translateX(0);
transition: all .4s ease;
}

.caption-link:hover .title {
transform: translateX(100%);
transition: all .4s ease;
}
<body>
  <section class="works">
    <a class="caption-link">
      <div class="title">Продаем телефоны</div>
      <div class="description">Телефоны всех марок за доступной ценой и для любого метода оплаты.</div>
    </a>
  </section>
</body>

1
  • Спасибо, да как я хотел)
    – user324082
    26 янв 2019 в 8:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.