Позиционирование и z-index в CSS. Часть-2.

Накладываем текст на изображение.

Если вы разобрались что к чему в предыдущей статье, тогда здесь для вас всё будет значительно проще.  И так нашей целью этого занятия является создать, общий блок, блок с изображением и блок с полупрозрачным фоном на который наложим текст. На самом деле это очень не плохой эффект и привлекательный.

Теперь давайте создадим основной блок. В принципе, можно воспользоваться блоком из предыдущего урока, но я захотел сделать его чуть повыше, поэтому создам новый.

<div class="basic-layer2"></div>

Всё тоже только цифра сменилась. То же самое  с правилами блока, просто копируем их с первой части и меняем высоту на 100 px.

.basic-layer2{
                position: relative;
                width:750px;
                height:400px;
                background-color:gray;
                border:1px solid #000;
                margin:10px auto;
}

Теперь внутри блока «basic-layer2» создадим ещё два.  Один с изображением, а второй, для текста.

<div class="basic-layer2">
<div class="laer-img"><img src="images/html_kurs.jpg" /></div>
<div class="laer-text"></div>
</div>

В общем, в HTML, у нас всё готово, идём в CSS. Сразу создадим правила, слоя с изображением.

.laer-img{
                position: absolute;
                width:650px;
                height:300px;
                top:50px;
                left:50px;
}

Абсолютное позиционирование, ширина, высота и отступы. Вроде нечего особенного. Теперь давайте вернёмся к блоку с будущим текстом и напишем его условия отображения.

.laer-text{
                position: absolute;
                width:650px;
                height:150px;
                top:200px;
                left:50px;
                background-color:rgba(0, 0, 0, 0.5);
                color:white;
}

Здесь основным является следующее. Высота блока на половину меньше, также увеличен отступ сверху, полупрозрачный фон и цвет для теста. Конечно же, сам текст нам лучше заключить в параграфы и дописать для него свои правила, например вот так.

.laer-text p{
                margin:5px;
                text-align:justify;
                font-size:13px;
}

Теперь можем, чего не будь написать, и заглянуть в браузер.

Рисунок № 1.

 

 В принципе всё как мы и хотели, стоит обратить внимание, что мы не использовали параметр z-index. Это потому что у нас абсолютное позиционирование и блоки идут друг за другом, поменяв их местами, мы уже вряд ли увидим наш текст. Хотя в целях бесперебойной работы во всех браузерах будет не лишним назначить блоку «laer-text» z-index: 1.

Делаем блок прозрачным (opacity).

Теперь если мы хотим реализовать идею с появлением текста при наведении, то здесь я предлагаю более простой и солидный вариант, с применением свойства «opacity» (анг. непрозрачность). Почему я назвал его солидным? Вы поймёте чуточку позднее.

И так всё что сейчас нам необходимо для исчезновения нашего блока  «laer-text», это дописать в него вот такое правило:

opacity: 0;

То есть мы сделали его полностью прозрачным. Теперь с помощью псевдокласса hover, заставим его опять приобрести все тона, которые он имеет.

.laer-text:hover{
                opacity: 1;
}

Вот и всё сохраняйте и проверяйте, всё работает как швейцарские часы! Вот только нет солидности, а именно плавности появления. А это серьёзный аргумент, и подправить это дело нам поможет свойство «transition» (анг. переход). Эти правила можно дописать как в псевдокласс hover,  так и в «laer-text», хотя последнее будет более правильным.  Всё что нам необходимо, это добавить вот такую строку:

transition: opacity 900ms;

Имеющую следующее значение, переход (transition) между параметрами прозрачности (opacity) и скорость появления (900ms). Но следует учесть, что это правило необходимо задать для всех популярных браузеров.

-webkit-transition: opacity 900ms;
-moz-transition: opacity 900ms;
-o-transition: opacity 900ms;
transition: opacity 900ms;

Ну, вот как то так, мы и реализовали ещё одну идею, с наложением текста на изображение и плавным появлением при переходе.

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

Внимание!!! Уважаемые гости и пользователи! Скачать исходные материалы, всех трёх примеров «Позиционирование и z-index в CSS», вы можете в третьей части!

Смотреть Демо >>