Регистрация    Войти
Авторизация

Текст на картике для uCoz

Текст на картике для uCoz.Текст на картике для uCoz.

На изображение 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;
}

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  11-10-2013, 15:38   Просмотров: 2428   

Источник новости: web.reslear.ru

картике для uCoz, на картике для uCoz, Текст на картике для uCoz, Текст на картике, Текст ucoz, Текст
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.