Using Box Module with CSS onhover

Beaver Builder
1

Hello - i am trying to do an onhover effect ( flip card type effect) inside a grid box layout (layered setting) - using code i snagged online and editing it. There is aa parent box set to repeat(7, 1fr), child boxes set to layers, then the photo module set to cover, then the onhover is placed inside the box with the text module. I have all margins, padding, gap, everything set to zero. I am new to the box module, (CSS grid and flexbox). So wondering if there is something unique in the box setting interfering with the code i snagged or something i am not spotting in the code itself.

Ideally i would like the effect to expand to fill the entire box, but for some reason i cannot use 100% height, only 100% width in the parent div (.card) works - so requires a finite unit for height. If i use 100% height, the effect doesn’t work, nothing happens when hovering. And one has to hover in the finite shape of course, to get the effect to works when a finite height is declared. Right now it is set to 200px height.

This of course not only keeps the effect limited to a set height and not filling the entire box, but appears to be pushing the boxes out of whack size wise (no matter what height i use). If i add a ratio to the child boxes, it makes the row display 6 boxes instead of 7, so i suspect it is still responding to a finite height rather than responsive height. I had to remove the ratio but need to enforce that as the 2/3 (2:3) ratio is standard for film and tv poster art and that way i am not having to resize the photos if not 2/3.

Pasting code and CSS below for convenience.

I only have the effect applied to the first row of 7 boxes so you can see how they are taller than the rest of the rows. Need to hover towards the middle of the boxes to see the effect in action.

Staging: Credits - DigitalFilm Tree Post Production

HTML

<div class="card">
<div class="card-inner">
<div class="card-front"></div>
<div class="card-back"><strong>SERVICES &amp; PRODUCTS</strong></div>
</div>
</div>

CSS

.card {
  width: 100%;
  height: 200px;
  margin: 50% auto;
  perspective: 1000px;
  cursor: pointer;
  border: 0px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-front {
  background-color: rgba(0,0,0,0.0);
  border: 0px;
}

.card-back {
  background-color: rgba(0,0,0,0.52);
  color: white;
  transform: rotateY(180deg);
}

Thank you for any help or advice.

Sherry~