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 ; }