html - Hover on my cards doesn't cover full card

Question

This is my product card with img(black) at the top and info at the bottom, when i hover card info block pops up from the bottom.

How can i force info block (card__body) to cover full card on hover? not like 70% of it I've tried like everything, if i set height to card__body it grows down only Changing translate doens't help too.

.ourMenu {
    width: 100%;
    padding: 0;
}

.ourMenu-wrap {
    width: 100%;
}

.card1 {
    width: 300px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    -webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    margin-bottom: 50px;
}

.card1 a {
    color: inherit;
    text-decoration: none;
}

.card:hover {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}


.card__thumb {
    height: 245px;
    overflow: hidden;
    background-color: #000;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.card__thumb img {
    width: 100%;
    display: block;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.card1:hover .card__thumb {
    height: 130px;
}

.card1:hover .card__thumb img {
    opacity: 0.6;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.card__body {
    position: relative;
    height: 100px;
    padding: 20px;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.card1 img {
    height: 250px;
}

.card1:hover .card__body {
    height: 230px;
}

.card__title {
    margin: 0;
    padding: 0 0 10px 0;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}


.card__description {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #666c74;
    line-height: 27px;
    opacity: 0;
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.card1:hover .card__description {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.card__footer {
    position: absolute;
    bottom: 12px;
    left: 20px;
    right: 20px;
    font-size: 11px;
    color: #a3a9a2;
}

<div class="ourMenu">
    <div class="ourMenu-wrap">
        <div class="items-section">
            <article class="card1">
                <header class="card__thumb">
                    <a href="#"><img src="img/pud-.jpg" alt="tab-item"></a>
                </header>
                <div class="card__body">
                    <h6 class="card__title"><a href="#">Шоколадный пудинг Фаберже</a></h6>
                    <p class="card__description">Главной изюминкой десерта является 2-каратный бриллиант, который вместо
                        традиционной вишенки украшает верхушку этого кулинарного шедевра.</p>
                </div>
            </article>
        </div>
    </div>
</div>

question from:https://stackoverflow.com/questions/65901943/hover-on-my-cards-doesnt-cover-full-card

Answer 1

Adding height: 0 as shown here appears to give you what you are looking for. This allows the .card__thumb element to transition from the set height of 245px to 0px which works in conjuction with the other transition for the descriptive, bottom portion. See the snippet below.

.card1:hover .card__thumb {
  height: 0px;
}

EDIT: I modified .card1:hover .card__body as shown below to compensate for the height lost when the top portion height shrinks:

.card1:hover .card__body {
  height: 345px;
}

.ourMenu {
  width: 100%;
  padding: 0;
}

.ourMenu-wrap {
  width: 100%;
}

.card1 {
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-transition: box-shadow 0.5s;
  transition: box-shadow 0.5s;
  margin-bottom: 50px;
}

.card1 a {
  color: inherit;
  text-decoration: none;
}

/*.card:hover {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}*/

.card__thumb {
  height: 245px;
  overflow: hidden;
  background-color: #000;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.card__thumb img {
  width: 100%;
  display: block;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.card1:hover .card__thumb {
  height: 0px;
}

.card1:hover .card__thumb img {
  opacity: 0.6;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.card__body {
  position: relative;
  height: 100px;
  padding: 20px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.card1:hover .card__body {
  height: 345px;
}

.card1 img {
  height: 250px;
}

/*.card1:hover .card__body {
  height: 230px;
}*/

.card__title {
  margin: 0;
  padding: 0 0 10px 0;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.card__description {
  position: absolute;
  margin: 0;
  padding: 0;
  color: #666c74;
  line-height: 27px;
  opacity: 0;
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.card1:hover .card__description {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.card__footer {
  position: absolute;
  bottom: 12px;
  left: 20px;
  right: 20px;
  font-size: 11px;
  color: #a3a9a2;
}

<div class="ourMenu">
  <div class="ourMenu-wrap">
    <div class="items-section">
      <article class="card1">
        <header class="card__thumb">
          <a href="#"><img src="https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo" alt="tab-item"></a>
        </header>
        <div class="card__body">
          <h6 class="card__title"><a href="#">Шоколадный пудинг Фаберже</a></h6>
          <p class="card__description">Главной изюминкой десерта является 2-каратный бриллиант, который вместо традиционной вишенки украшает верхушку этого кулинарного шедевра.</p>
        </div>
      </article>
    </div>
  </div>
</div>