как сделать увеличение блока при нажатии, и так же обратный эффект

Question

<a id="top" href="/ourpartners/?partner={{ID}}" class="op-partner-item" data-id="{{ID}}" target="_blank" title="Подробнее в новой вкладке">
 <div class="partner-name">{{displayName}}</div>
 <div class="partner-logo" {{#hasImage}} style="background-image:url(/img/site-media/partners/{{ListImage}});" {{/hasImage}}>
     {{#partnerType2}}
     <div class="partner-logo-female">{{>svgPartnerFemale}}</div>
     {{/partnerType2}}
     
     {{#partnerType1}}
     <div class="partner-logo-male">{{>svgPartnerMale}}</div>
     {{/partnerType1}}
     
     {{#partnerType0}}
     {{#hasSvg}}
     {{{ImageSvg}}}
     {{/hasSvg}}
     {{#noLogo}}
     <div class="partner-no-logo">{{>svgPartnerNoLogo}}</div>
     {{/noLogo}}
     {{/partnerType0}}
 </div>
 <div class="partner-description">{{Title}}</div> ---текст который появляется при увеличении
</a>
{{/items}}

Answer 1

вам нужна такая структура:

<div class = 'block'>
    <div>то, что видно всегда</div>
    <div class = 'info'>то, что видно при наведении</div>
</div>

и при наведении обрабатывать так:

.block {
    height: 100px;
}

.block .info {
    display: none;
}

.block:hover {
    height: 200px;
}

.block:hover .info {
    display: block;
}

добавление плавной анимации смены состояния - по желанию

но смысл основной в следующем - у нас 2 состояния дочерних объектов:

когда на блок не наведен курсор

.block дочерние объекты {}

когда на блок наведен курсор

.block:hover дочерние объекты {}

Answer 2

.card {
  position: relative;
  width: 300px;
  min-height: 300px;
  margin: 30px 10px 100px 10px;
  padding: 20px 15px;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background-color: #f2f2f2;
}

.card:hover {
  min-height: 60px;
}

.card__imgBox {
  position: relative;
  width: 260px;
  height: 260px;
  top: -60px;
  left: 20px;
  z-index: 1;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

img {
  max-width: 100%;
  border-radius: 4px;
}

.card:hover .content {
  visibility: visible;
  opacity: 1;
  margin-top: 5px;
  -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
}

.content {
  position: relative;
  margin-top: -140px;
  padding: 10px 15px;
  text-align: center;
  color: #111;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

 <div class="card">
<div class="card__imgBx">
  <img
    src="https://www.arthipo.com/image/cache/catalog/poster/movie/1-758/pfilm75-75-film-the-dark-knight-2-1000x1000.jpg"
    alt="">
</div>
<div class="content">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, odit! Culpa, voluptatibus. Neque sapiente, in,
    aspernatur totam recusandae asperiores ad incidunt magnam quos minima adipisci quas molestias! Dignissimos,
    cumque minus.</p>
</div>
  </div>

БЛОГ НА HUSL

как сделать увеличение блока при нажатии, и так же обратный эффект

Ответы (2 шт):