0

Всем доброго времени суток. Как сделать чтобы параграф был спрятан за h2 и img (был невидим), но при наведении на новостной блок он "выскальзывал" сверху-вниз и стал видимым как на примере:

.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2>Первый кот-директор в мире!</h2>
  <p class="hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

2 ответа 2

1

$(`.clickable`).on(`click`, function() {
  $(this).next().slideDown();
});
.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.clickable {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2 class="clickable">Первый кот-директор в мире!</h2>
  <p style="display:none">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

1
  1. Задаёте параграфу плавность измнения: transition: 1s
  2. Скрываете его: opacity: 0
  3. Переносите наверх: transform: translateY(-200%)
  4. Добавляете стили для класса visible, благодаря чему параграф становится видимым и возвращается на место.
  5. По наведению на новостной блок добавляете параграфу класс visible (здесь придётся использовать js/jquery, потому что обычный hover не позволит сохранить состояние - как только Вы уберёте курсор от картинки, параграф уедет обратно и исчезнет)

$('.newsItem').on('mouseover', function(){
    $('.hide').addClass('visible');
})
.newsItem {
  width: 400px;
  height: 500px;
  cursor: pointer;
}
img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.hide {
  transform: translateY(-200%);
  opacity: 0;
  transition: 1s;
}
.hide.visible {
  transform: translateY(0);
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsItem">
  <img src="https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75">
  <h2>Первый кот-директор в мире!</h2>
  <p class="hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora dolor pariatur, voluptate odit ullam a voluptatum veritatis nostrum aut, eveniet et minus aperiam esse culpa provident. Dolores, ad, iusto?
  </p>
  <hr>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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