Card designer (dev. 20221220) ∫The card height container controlled by % padding-top!•
Card designer (dev. 20221220)
SC for the crop/hover img: 
sc name="card1" N="A3" W="30%" H="30%" mgnR="1.5%" img1="HYTTE.jpg" img2="LAKE.jpg" h1_Yshift="0%" h1_transit="1s" rad="0" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"
contain2_A3 · title2_A3 · body2_A3
Most up to date card shortcode.
Edit SC
The card1 shortcode detailed in column 1 makes it very easy to insert a hover/crop card image. The card height finally controlled by % thru padding-top in the card container. 
.contain {width:x%; padding-top:y%}
1. class=”contain_06n5 card_06n5″
article class="contain_06n5 card_06n5" · img src="LAKE etc./ div class="layer_06n5_h1" · ‹img src="HYTTE etc./
layer_06n5_h1
layer_06n5_h4
contain_06n5_40 was used here because of narrow column …
%%title_02: $$custom_field:acf_txt1$$%%
%%body_02: $$custom_field:acf_quote$$ %%
$$enclosed_content$$ Enclosed .. 
.card_06n5:hover .layer_06n5_h1   {opacity:1; transition:0.5s ease-out; transform:translateY(0vw);}}
.card_06n5 .layer_06n5_h1 img     {position:absolute; top:0; width:100%; height:100%; object-fit:contain;}
.card_06n5 .layer_06n5_h1         {position:absolute; opacity:0.05; top:0%; bottom:0%; left:0; width:100%; height:100%; padding:2px; border-radius:5px; color:white; z-index:10; border:0px dotted white; background:#00000050; text-align:center; transition:all 0.4s ease-out; }

.card_06n5:hover             {}
.card_06n5:hover::before     {opacity:0;}       
.card_06n5::before           {opacity:0; content:""; position:absolute; top:0; left:0; width:100%; height:100%; display:block; border-radius:0px; background:rgba(0,0,0,0);}

.card_06n5 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:5px; opacity:1;}

.card_06n5     {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border-radius:5px; opacity:1;} 

.contain_06n5  {position:relative; float:left; border:2px dashed blue; overflow:hidden; margin:0 1% 4px 0;} @media (min-width:1025px) {.contain_06n5 {width:20%; padding-top:20%;}}