На изображение IMG поверх наложим не только текст, но и HTML код вплоть до другого изображения. Используя CSS и новые HTML5 теги, такие как figure и figcaption, мы сможем произвести данное решение.
Вместо описания для изображения в теге figcaption, мы будем использовать текст который будет отображаться перед изображением.
HTML - вёрстка
Код
<figure> <img src="Ссылка на изображение"> <figcaption>Текст который будет отображаться над изображением</figcaption> </figure>
CSS - стили
Код
figure{ position:relative } figcaption{
position:absolute; top:0; left:0; }
Исходный код:
Код
<figure class="primerfigursstt"> <img src="http://web.reslear.ru/_ld/0/20828171.jpg"> <figcaption class="primerfigurssttC"> <div style="padding:5px;"> <div style="font:bold 20px Tahoma">Привет!</div> <div>Спасибо, что прочитали эту статью про наложение текста на изображение.</div> <div>Не забудьте так-же оценить её!</div> </div> </figcaption> </figure>
CSS:
Код
.primerfigursstt{ position:relative; display:inline-block; } .primerfigurssttC{
opacity:0; position:absolute; top:0; left:0; background: rgba(0,0,0,.5); width:223px; height:164px; color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); font: 11px Tahoma; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .primerfigursstt:hover .primerfigurssttC{
opacity: 1 !important; }
