[acf_txt1]℗Popup hover cards managed via SC and local params. Old column_master50,100 and col sticker css @btm | See also Goto › Card_excerpt-sc
Cards early versions(before |contain-card|) Local:_06n500 CSS/HTML | Edit SC_06n5 84410 Edit SC Excerpt
Cardstart: section class=wrap_06n500
contain_06n500 card_06n500
1. The card only works if the height is set in solid values:
contain_06n500, height:6vw
contain_06n501 height:30% notOK. Only text grows the box.
3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).
3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).
SHORTCODE VERSION DOCUMENTING THE CSS FOR THE THREE CLASSES: SC name=”card_06n5″
Cardstart: section class=wrap_06n5 
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}
contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}
Excerpts | Edit SC Excerpt Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
1
HYTTE
This too enables the automatic generation of cards
Edit SC
New nomenclature in progress: Local Card & SC’s inserted insie the card and wrapper! Edit shortcode card_06n5 84410
Col: column_master100 100%
contain_06n5L card_06n5L
Cardstart: section class=wrap_06n5 
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}
contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION 
Structural components: Cards
column_06n5 (not activated)
‹section› Wrap    ≥  Dotted red   ≥ VarHEIGHT max-content. (Cardstart)




‹article› Contain ≥  Dotted blue  ≥ DefHEIGHT in vw(R). | 50%WIDTH
‹article› Card    ≥  Base card    ≥ 100%HEIGHT | 100%WIDTH - Absolute


‹div›     Layer   ≥  Interactive card overlays

Structural components: Excerpts

‹article› wrapper_01   ≥  Fine line      ≥ HEIGHT100% b,m,pad
‹div›     class=pw5    ≥  Additional post_wrap formatter
[ lgc_column ]         ≥  Card size within column, responsive
 px_l line             ≥  Top 1px image corrects full width of frame_01

‹section› frame_01     ≥  Base card. Post_wrap, Float & margins
‹section› crop_01      ≥  IMG W/H in% (R) - Relative
‹img›                  ≥  Op% - Absolute
‹section› container_01 ≥  Content container ± ‹div's for title_01+ body_01›

Structural components CARDS
‹header›  BBLw    ≥  Page margins ≥ Local
‹column›  Column  ≥  Dashed grey  ≥ Local
‹section› Wrap    ≥  Dotted red   ≥ Local or Shortcode (Cardstart)
‹article› Contain ≥  Dotted blue  ≥ Local or Shortcode
‹article› Card    ≥  Base card    ≥ Local or Shortcode
‹div›     Layer   ≥  Interactive card overlays

.wrap_06n5       {height:max-content; padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; overflow:hidden;}   @media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

.contain_06n5    {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 img   {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:10px;}
.card_06n5       {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;} 

.wrapper_01 {height:100%; border:1px solid rgba(100,120,230,0.1); margin:0 0 2px 0!important; border-radius:3px; overflow:hidden; background:none;}
@media (min-width:1025px) {.wrapper_01 {padding:0.2vw 0.3vw 0.2vw;}}

.container_01 {position:relative; overflow:hidden; background-color:%%container_01_bkg:rgba(255,255,255,1)%%;}
@media (min-width:1025px) {.container_01 {min-width:%%container_01_pc_W:69% %%; min-height:22.5%; padding:%%container_01_pc_pdg:1px 1px 1px 8px%%;}}

.crop_01 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:51; opacity:%%op_pct:0.85%%;}
.crop_01 {position:relative; overflow:hidden; background-color:none; float:%%crop_float_01:left%%; margin:%%crop_01_mrg:0 1% 4px 0%%;}
@media (min-width:1025px) {.crop_01 {min-width:%%crop_01_pc_W:30% %%; padding-top:%%crop_01_pc_H:30% %%;}}
Emptied