Hover cards6    |  …

The style is in the SC
SC card_06n | Html is fixed, CSS is %% | Caution info_o and layer_h_o have mixed prefix
Title_06n_o
Title_06n_o
Description_06n_o
Title_06n_h_o
Description_06n_h_o
lgc_column grid="25" sc name="card_06n
wpdatatable
HOVER IMAGE LAYER (HOVER) | info_00n_h
Hover Hover >ON .card_00n:hover .info_00n_h op%:1; transf
Hover image IMG .info_00n_h img op%:0; pos:abs; T;L; W;H; pad; rad;col; z:51;
Wrapper for hover image Box>IMG | Pre-hover >OFF .card_00n .info_00n_h op%:0; pos:abs; T0; W;H; pad; rad; col; transf; trans°:0.5s; z:10;
BACKG INFO OVERLAY (PRE-HOVER) | info_00n_o
Hover Hover >OFF .card_00n:hover .info_00n_o op%:0; transf;
Bkg info overlay Box>Overlay info .card_00n .info_00n_o op%:1; transf; | (op% 0.5 if darken to better show hover text)
REVEAL INFO LAYER (HOVER) | info_00n
Hover Hover >ON .card_00n:hover .info_00n op%1; transf; trans°:0.5s ease-in; col;
Background info Box>Reveal info | OFF/Shifted .card_00n .info_00n op%:0; pos:abs; T;B;var W; maxW; pad; col; transf/Y0px; trans°:0.5s; z:11;
CARD BACKGROUND (LAYER BEHAVIOUR) | card_00n
X/Y Shift on hover Hover .card_00n:hover transf;
Opacity pre? Hover:before ??? .card_00n:hover:before op%:1;
Overlay color on hover Card:before .card_00n:before op%:0; content:"; pos:abs; T;L; W;H; displ:block; rad; bkg:0.6; trans°:0.5s; z:2;
Background image IMG .card_00n img pos:abs; top0;L0; W;H; object-fit:cover; rad;
Background card Box > card .card_00n pos:rel; W;H; rad; box-sh; trans°:0.5s ease-out;
Wrapper Responsive wrapper .wrap_00n W;H; 
‹article class="wrap_06n"›
‹section class="card_06n"›    ‹img src="/wp-content/EYE.jpg"/›
‹article class="info_06n_o"›  
	‹div class= "row_06n_t"› ‹card_06n_t›Title_06n_o‹/card_06n_t›‹/div›	
	‹div class= "row_06n_p"› ‹card_06n_p›Description_06n_o‹/card_06n_p›(EYE.jpg)‹/div›  ‹/article›

‹article class="layer_06n_h"›  ‹img src= "/wp-content/MOORE.jpg"/›  ‹/article›
‹article class= "layer_06n_h_o"›       
	‹div class= "row_06n_t"› ‹card_06n_t›Title_06n_h_o‹/card_06n_t›‹/div›
	‹div class= "row_06n_p"› ‹card_06n_p›Description_06n_h_o‹/card_06n_p›(MOORE.jpg)‹/div›
	‹div class= "row_06n_b"› ‹a href='/'class='popup'.›‹button›Btn_06n_h_o‹/button›‹/a› ‹/div›‹/article›
‹/section›
‹/article›
SC card_06n | Html is fixed, CSS is %% | Caution info_o and layer_h_o have mixed prefix 
/*HOVER/REVEAL_INFO_LAYER2_INFO > layer_06n_h_o  z:11;*/
.card_06n:hover .layer_06n_h_o    {opacity:1; transform:translateY(0px);  transition:0.5s ease-in; color:%%layer_06n_h_o_col:rgba(255, 255, 255, 1)%%;} 
.card_06n .layer_06n_h_o          {opacity:0; position:absolute; top:%%info_06n_h_o_top%%; bottom:%%info_06n_h_o_bottom%%; width:100%; max-width:500px; padding:%%pad_06n:14px 28px 14px 34px%%; color:%%info_06n_col:rgba(255, 255, 255, 1)%%; transform:translateY(0px); transition:0.5s; z-index:11;}

/*HOVER/REVEAL_LAYER_1_IMG > layer_06n_h z:10;*/	
.card_06n:hover .layer_06n_h      {opacity:1; transform:translateY(0px); }  /* Hover area opacity & shift */
.layer_06n_h img                  {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:%%rad_06n:0px%%; z-index:51;}
.card_06n .layer_06n_h            {opacity:0; position:absolute; top:0; width:100%; height:100%; padding:40px; border-radius:%%rad_06n:0px%%; color:%%info_06n_col:rgba(255, 255, 255, 1)%%; transform:translateY(0px); transition:0.6s; z-index:10;}

/*CARD BACKGROUND OVERLAY (PRE-HOVER) > info_06n_o */
.card_06n:hover .info_06n_o  {opacity:0; transform:translateY(0px);}
.card_06n .info_06n_o        {opacity:1; position:absolute; top:%%info_06n_o_top%%; bottom:%%info_06n_o_bottom%%; width:100%; padding:%%pad_06n:14px 28px 14px 34px%%; color:%%info_06n_o_col:rgba(255, 255, 255, 1)%%; }

/*CARD BACKGROUND PRE-HOVER | HOVER LAYERS BEHAVIOUR*/	
.card_06n:hover             {transform:translateY(0px);}  /* hover > card shift x-y */
.card_06n:hover:before      {opacity:1;}  /* hover > card overlay color, 2nd opacity control */
.card_06n:before            {opacity:0; content:""; position:absolute; top:0; left:0; width:100%; height:100%; display:block; border-radius:%%rad_06n:0px%%; background:%%overlay_06n_col:rgba(0, 15, 35, 0.6)%%;  transition:0.5s; z-index:2;}

.card_06n img               {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:%%rad_06n:0px%%;}
.card_06n                   {position:relative; width:100%; height:100%; border-radius:%%rad_06n:0px%%; box-shadow:0px 7px 10px rgba(0,0,0, 0.5); transition:0.5s ease-out;}

.wrap_06n                   {width:%%wrap_06n_W:100% %%; border:none; margin:auto;}
@media (min-width:1025px) {.wrap_06n {height:%%wrap_06n_H:24vw %%}}
@media (min-width:768px) and (max-width: 1025px) {.wrap_06n {height:30vw; }}
@media only screen and (max-width:767px) {.wrap_06n {height:62vw; }}
SC card_06n | Html is fixed, CSS is %% | Caution info_o and layer_h_o have mixed prefix
Info Overlay Title_o