0

Есть блок с текстом. Мне нужно при наведении его увеличивать, раскрывать текст и чтобы многоточие исчезало. Я сделал увеличение блока, но не знаю как сделать раскрытие текста и исчезновение ... Помогите решить эту задачу.

.book-wrap:hover {
  transform: scale(1.5);
  z-index: 1;
  transition: transform .5s;
  cursor: pointer;
}

.read-more-target {
  opacity: 0;
  font-size: 0;
  transition: .25s ease;
}
<div class="book-wrap">

  <p>Text <span class="point">...</span></p>
  <span class="read-more-target">New text</span>

  <img src="img/1.jpg" alt="">
  <span>download</span>
  <a href="#"><i class="fa fa-download"></i></a>
</div>

2
  • Должны скрываться точки и показываться .read-more-target?
    – De.Minov
    3 мар 2019 в 15:38
  • @CbIPoK2513 да, при наведении на слово Text
    – Timur
    3 мар 2019 в 15:40

1 ответ 1

1

Так?

.book-wrap:hover {
  /*transform: scale(1.5);*/
  z-index: 1;
  transition: transform .5s;
  cursor: pointer;
}

.read-more-target {
  opacity: 0;
  font-size: 0;
}

.point {
  opacity: 1;
}

.read-more-target,
.point {
  transition: .25s ease;
}

.hover:hover .point {
  opacity: 0;
}

.hover:hover .read-more-target {
  opacity: 1;
  font-size: 100%;
}
<div class="book-wrap">

  <div class="hover">
    <p>Text <span class="point">...</span></p>
    <span class="read-more-target">New text</span>
  </div>

  <img src="img/1.jpg" alt="">
  <span>download</span>
  <a href="#"><i class="fa fa-download"></i></a>
</div>

2
  • @CblPoK2513, да. Спасибо Вам
    – Timur
    3 мар 2019 в 15:53
  • @AsasSas, не за что
    – De.Minov
    3 мар 2019 в 16:07

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.