UIUX Component

Text over image on hover via CSS. Hover cursor on image below to see the action. DEMO BOO! HTML  <div class= "hover-image" > <img src= "https://picsum.photos/1080/720" > <div> BOO! </div> </div> CSS .hover-image { position : relative ; width : 300px ; height : 200px ; } .hover-image img { width : 100 % ; } .hover-image div { box - sizing : border - box; width : 100 % ; padding : 1em ; position : absolute ; bottom : 0 ; color : yellow ; background-color : rgba( 0 , 0 , 0 , 0 . 5 ); visibility : none ; opacity : 0 ; transition : opacity 0.3s ; } .hover-image :hover div { visibility : visible ; opacity : 1 ; }

Smooth animation card effect using box shadow with only CSS animations and a pseudo element. Hover over the box below to see the action. DEMO HTML < div class = "box-shadow" ></ div > CSS . box - shadow { position: relative; display: inline - block; width: 100 px; height: 100 px; border - radius: 5 px; background - color: #fff; box - shadow: 0 1 px 2 px rgba( 0 , 0 , 0 , 0.15 ); transition: all 0.3 s ease - in - out; margin: 1 em; background - color: BlanchedAlmond; } . box - shadow::after { content: '' ; position: absolute; z - index: - 1 ; width: 100 % ; height: 100 % ; opacity: 0 ; border - radius: 5 px; box - shadow: 0 5 px 15 px rgba( 0 , 0 , 0 , 0.3 ); transition: opacity 0.3 s ease - in - out; } . box - shadow:hover { transform: scale( 1.2 , 1.2 ); } . box - shadow:hover::after { opacity: 1 ; }

Cool hover animation effect via transform rotate with value in degree and turn. CSS (Degree) . box { width: 150 px; height: 150 px; margin: 2 em; background: red; } . box:hover { transition - duration: 2 s; transform: rotate( 360 deg); } CSS (Turn) . box { width: 150 px; height: 150 px; margin: 2 em; background: green; } . box:hover { transition - duration: 2 s; transform: rotate( 3 turn); }