HTML CSS examples for CSS Widget:Image Text
CSS - Text over image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *, *:before, *:after {<!-- ww w. j a v a2s. co m--> -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } html,body { height:100%; } img { width:100%; height:auto; } .container { height:100%; } .panel { position:relative; top:0; left:0; z-index:2; width:100%; height:100%; min-height:100%; display:table; } .panel-body { height:51%; width:100%; position:absolute; bottom:0; left:0; z-index:3; background:red; } .left,.right { width:51%; display:table-cell; height:100%; float:left; } .left img,.right img { width:41%; height:100%; float:left; } .box-text { position:relative; display:table-cell; float:left; top:0; } </style> </head> <body> <div class="container"> <div class="panel"> <img src="https://www.java2s.com/style/demo/Opera.png"> <div class="panel-body"> <div class="left"> <img src="https://www.java2s.com/style/demo/Opera.png"> <div class="box-text"> <h2>Lorem ip</h2> <h2>Lorem</h2> <h2>Lorem</h2> </div> </div> <div class="right"> <img src="https://www.java2s.com/style/demo/Safari.png"> <div class="box-text"> <h2>Lorem ip</h2> <h2>Lorem</h2> <h2>Lorem</h2> </div> </div> </div> </div> </div> </body> </html>