Как правильно реализовать :hover?

5debbd1218421624226334.jpeg

Верстаю макет. Есть вот такое вот место. Где по наведению должна появляться нижняя плашка с "подробнее", и сам блок должен подтягиваться немного к верху от появления этой плашки. Но чет как бы я не делал, не выходит.
У блоков один класс, что логично. И пытаясь привязать к нему hover с изменением высоты например, получается так, что наводя на один, дрыгаться начинают и остальные, включая вообще и задний фон(синий квадрат слева)

Помогите правильно реализовать это все дело. Буду очень признателен
<section class="main_header">
      <a href="#">TrueIceland рекомендует</a>
    </section>
    
    <section class="block_price">
     <div class="block_price_bg"></div>
      <div class="price_item">
       <div class="price_img"><img src="/img/bg.jpg" alt=""></div>
        <div class="price_item_cont">
          <h3>Открытие Исландии</h3>
          <span>групповой тур, 14 дней</span>
          <p>Незабываемое путешествие по самым интересным местам южной и западной Исландии. Соединяя в себе случшее исландской природы и культуры.</p>
          <span>Даты: 13, 23 июл; 10 августа</span>
          <a href="#" class="">от 2661$</a>
       </div>
       <div class="price_bot_btn">Подробнее</div>
      </div>
      
      <div class="price_item">
       <div class="price_img"><img src="/img/bg.jpg" alt=""></div>
        <div class="price_item_cont">
          <h3>Открытие Исландии</h3>
          <span>групповой тур, 14 дней</span>
          <p>Незабываемое путешествие по самым интересным местам южной и западной Исландии. Соединяя в себе случшее исландской природы и культуры.</p>
          <span>Даты: 13, 23 июл; 10 августа</span>
          <a href="#" class="">от 2661$</a>
       </div>
       <div class="price_bot_btn">Подробнее</div>
      </div>
    </section>


.block_price{
  display: flex;
  align-items: center;
  position: relative;
  margin: 60px 0 140px;
  height: 100%;
  box-sizing: border-box;
}
.block_price_bg{
  z-index: 1;
  content: '';
  position: absolute;
  left: 0;
  background: #6f95ac;
  height: 600px;
  width: 505px;
}
.price_item{
  z-index: 2;
  width: 320px;
  height: 500px;
  background: #fff;
  position: relative;
  margin: 0 0 0 25px;
  box-sizing: border-box;
}
.price_bot_btn{
  background: #2aa5ed;
  height: 60px;
  width: 320px;
  z-index: 3;
}
.price_item:nth-child(1){
  margin: 0 0 0 110px;
}
.price_item  .price_bot_btn{
  visibility: hidden;
  opacity: 0;
}
.price_item:hover .price_bot_btn {
  visibility: visible;
  opacity: 1;
}

.price_item_cont{
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: 270px;
  padding: 30px 25px 10px 25px;
}
  • Вопрос задан
  • 176 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы