0

Подскажите как, к данным карточкам можно добавить анимацию (только на css). Что бы при наведении появлялся блок, в котором есть название картинки и описание картинки. введите сюда описание изображения

.gallery {
  flex-direction: row;
  justify-content: space-around;
  display: flex;
  width: 80%;
  height: 80%;
  padding-top: 20px;
}

.gallery_item_img:hover {
  opacity: 0.8;
}

.gallery_item_img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 250px;
}
<div class="gallery">
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
</div>

1 ответ 1

1

Ну во-первых вы hover привязали к контейнеру, подсказка будет всплывать на весь контейнер. Нужно так:

.gallery {
  flex-direction: row;
  justify-content: space-around;
  display: flex;
  width: 80%;
  height: 80%;
  padding-top: 20px;
}

.gallery_item_img:hover {
  opacity: 0.8;
}

.gallery_item_img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 250px;
}
<div class="gallery">
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
  </div>
</div>

Во-вторых вот:

.gallery_item {
position: relative;
 display: inline-block;
 cursor: pointer;
}

.text {
  opacity: 0;
  position: absolute;
  color: #fff;
  left: 0;
  bottom: 0;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  background: rgba(5,13,156,.55);
}
.gallery_item:hover .text {
  opacity: 1;
  transition: all 0.6s;
}
<div class="gallery">
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
    <div class = "text">Суматранский тигр</div>
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
    <div class = "text">Суматранский тигр</div>
  </div>
  <div class="gallery_item">
    <img class="gallery_item_img" src="https://picsum.photos/200/300/?random" />
    <div class = "text">Суматранский тигр</div>
  </div>
</div>

2
  • Первое исправил. А во-вторых?) 24 фев 2019 в 9:50
  • Во-вторых ниже первого)) 24 фев 2019 в 10:50

Ваш ответ

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

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