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

Question

[Игорь Ламп]

Верстаю макет. Есть вот такое вот место. Где по наведению должна появляться нижняя плашка с "подробнее", и сам блок должен подтягиваться немного к верху от появления этой плашки. Но чет как бы я не делал, не выходит.
У блоков один класс, что логично. И пытаясь привязать к нему 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;
}

Answer 1

[Николай]

Codepen

Comments

[Игорь Ламп]

Японской бог..... Я оказывается был близко, но так далеко ахахха. Спасибо, Николай за вашу помощь хех. Получилось как хотел, спасибо

[dom1n1k]

Я думал вам принципиально важно, чтобы нижняя кромка фотографии и заголовок оставались на месте (как на макете). При таких условиях задача гораздо сложнее.
А если не нужно, тогда всё просто, конечно.

[Николай]

dom1n1k, сложного ничего нет. Оставляй место под кнопку или абсолютно задай ее под блок контента и при наведении смещай bottom: -30px и c помощью opacity показывай плавно.

[dom1n1k]

Николай, не, там не всё так просто.
Во-первых, фотка расширяется вверх.
Во-вторых, показывать смещённую кнопку через opacity плохо, потому что через неё будет просвечиваться край карточки.

Там по-хорошему надо расширять карточку и только потом показывать кнопку. А расширить карточку нужно так, чтобы заголовок стоял на месте. Это можно сделать, одновременно манипулируя несколькими размерами и отступами, но я боюсь, что в реальном браузере это даст противные подрагивания при анимации. Склоняюсь к тому, что карточку нужно верстать в большом размере, а потом клипить... но черт его знает, пока не попробуешь, не поймешь. И с тенями проблемы очень возможны.

[Николай]

dom1n1k, жду вашего кода. После этого предложу свою реализацию.