HTML CSS examples for CSS Widget:Image Text
Overlay image with text
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .overlay {<!--from w ww . j a v a 2 s. c om--> position: relative; } .overlay:before { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; } .blue2 { background-color: rgba(36, 131, 178, 0.9); } #contact { color: #fff; width: 500px; height: 300px; padding: 1.875em 2.8125em 0 2.815em; overflow: hidden; } #contact img { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1; } .contactButton { color: #fff; font-size: 0.864375em; text-transform: uppercase; width: 10.55676em; height: 1.80766em; margin-top: 10px; background-color: #F7CB5F; border: 1px solid #F7CB5F; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; cursor: pointer; position: relative; } .contactButton:hover { background-color: #2483B2; border: 1px solid #2483B2; } .contactButton:active { position: relative; top: 1px; } </style> </head> <body> <section class="overlay blue2" id="contact" name="contact"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> <h3>Contact</h3> <p> <b>T:</b> ###-###-#### </p> <p> <b>F:</b> ###-###-#### </p> <button type="button" class="contactButton">Contact Us</button> </section> </body> </html>