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
[wpdatatable id=15]


‹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