CSS - полупрозрачный блок поверх картинки

CSS - полупрозрачный блок поверх картинки


исправил ошибки в верстке и выкладываю обновленный код

Возможности CSS3 иногда просто поражают своими способностями сделать одну идею несколькими способами и уложиться в 20 строк! И и в этой статье я раскажу как можно накладывать текстовые блоки поверх картинки при помощи нескольких строк кода. И да, картинка не изменяется, текст просто на нее наезжает.

Исходник:


<div id="custom1_slider">
<a href="http://sitename.name">
<img src="imageurl.png" />
<div class="slider_text">
<b>Formula 1 - результат и отзывы с первого этапа</b>
<span>Новый сезон в формуле 1, новые правила, новые регламент, довольные и недовольные фанаты. Все в этой статье! • 18-03-2014, 17:08</span>
</div>
<div class="slider_new">NEW</div>
</a>
</div>


И теперь CSS:

/*Slider*/
#custom1_slider{
position: relative;
width: 600px; /*Важный параметр. Блоки абсолюта не будут вылазить за этот размер*/
height: 350px;
left: 0;
margin: 20px auto;
overflow: hidden;
}

/*Позиционирование картинки*/
#custom1_slider img{
width: 600px;
height: 350px;
float: left;
}

/*Текст! Черная полоса*/
.slider_text{
position: absolute;
bottom: 0; /*Привязываем к нижней части на случай большого объема текста*/
margin-bottom: 10px; /*И просто приподнимаем чуть вверх*/
left: 20px;
font:13px verdana;
padding: 5px;
background: #000;
opacity: 0.6;
}

/*красный заголовок на черной полосе*/
.slider_text b{
color: #ff0000;
font:15px verdana;
}

/*остальной текст на черной полосе*/
.slider_text span{
color: #fff;
opacity: 0.7;
}


.slider_text:hover{opacity: 0.8;}

/*Красный прямоугольник*/
.slider_new{
position: absolute;
top: 10px;
border-left: 10px solid #000;
background: #ff0000;
padding: 6px;
color: #000;
font-weight: 700;
opacity: 0.7;
}


Понравилась статья "CSS - полупрозрачный блок поверх картинки" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 14621   Дата: 21-мар-2014, 16:19

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика