Hover cards3    | 



sc name=”card_hover3″ includes shortcode in content section. No Flex
HOVER OVER THE FIELD

card_hover3 - ID: 79495

Hover cards3  id=80557

Caption w33 ØfL1 | Øsub3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ▷4

$$ id=80557 | wpbb post:id 80557
Edit sc cardframework2 |  Popup sc cardframework2

Code
Edit Card hover 3 – ID:79495 < section class="card_section3_79495" >HOVER OVER THE FIELD < div class="card3_79495"> < div class="info3_79495"> < h1>%%title1:title1%% - ID: 79495< /h1> < p>$$enclosed_content$$< /p> < button>%%btn1:Les mer%%< /button>< /div> < /div> < /section> .card3_79495:hover .info3_79495 {opacity:1; transform:translateY(8px);} /* determines the card.info trsp% and X or Y shift on hover */ .card3_79495 .info3_79495 {position:relative; z-index:3; color:inherit; opacity:0; transform:translateY(30px); transition:0.6s;} /* Initial state */ .card3_79495:hover {transform:translateY(-6px);} /* translate distance of the vertical shift on hover */ .card3_79495:hover:before {opacity:1} /* hover:before opacity, determines the card overlay trsp% on hover */ .card3_79495:before {opacity:0; content:””; position:absolute; top:0; left:0; display:block; width:100%; height:100%; border-radius:10px; background:rgba(0, 0, 0, 0.5); z-index:2; transition:0.7s; } /* overlay trsp% before hover (opacity) and upon hover (bkg)*/ .card3_79495 {width:100%; height:32vw; border-radius:10px; padding:2.5rem; margin:0 1.5rem; background:white; position:relative; box-shadow:0px 7px 10px rgba(0, 0, 0, 0.5); transition:0.4s ease-out;} /* display:flex removed; align-items:flex-end; ENABLES H-ALIGN */ .card_section3_79495 {width: 100%; height: 100%; padding:20px; align-items:center; justify-content:center; background:dodgerblue;} /* display:flex removed;*/