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

среда, 26 июля 2017 г.

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

.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>

источник