Пример как разместить текст поверх изображения на HTML

ЗАГОЛОВОКпрозрачная область

<style> .imgteaser { /* общий блок */ position: relative; display: table; margin: 0 auto; border: 10px solid #456; line-height: 0; color: rgb(223,223,223); cursor: pointer; } .imgteaser:after { /* "подробнее" */ content: "подробнее \bb"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; background: rgba(17,34,51,.6); line-height: 1.6em; } .imgteaser:hover:after {content: none;} .imgteaser figcaption {display: none;} .imgteaser:hover figcaption { /* прозрачная область */ display: block; position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 5px 10px; background: rgba(68,85,102,.7); font-size: 80%; line-height: 1.3em; } .imgteaser:hover figcaption strong { /* заголовок */ display: block; line-height: 2em; font-size: 110%; } </style> <figure class="imgteaser"> <img height="600" width="539" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrVcRy0a0iNjwte1s6JWjxEq8TAYKAKMNws4pAKL-3d-8M7DePLlSeioo90kPKY9pEZldaFikSTJYBtyW8V2102OZujYBfy_Kw-VrjJxuhBDh3nD-Fikl7GYv4-nxLpKsOc7s10CMZqsP/s600/kon.jpg" alt="конь"/> <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption> </figure>

источник