HTML CSS examples for CSS Widget:Image Text
make text box to overlap with the image
<html> <head> <style> .recentconcert<!-- w w w .j a v a 2s .c o m--> { margin:4px; float:left; width:49%; height:501px; background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-repeat:no-repeat; background-size:cover; position:relative; border:3px solid Chartreuse; } .whitebox { height:41px; width:100%; bottom:0px; position:absolute; text-align:center; background-color:yellow; } </style> </head> <body> <div class="fullrecent"> <div class="recentconcert"> <div class="whitebox"> Lorem ipsum do </div> </div> <div class="recentconcert"> <div class="whitebox"> Lorem ipsum do </div> </div> <div class="recentconcert"> <div class="whitebox"> Lorem ipsum do </div> </div> <div class="recentconcert"> <div class="whitebox"> Lorem ipsum do </div> </div> </div> </body> </html>