2014
12
Ноя

Подписи к изображению



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







HTML разметка


<div class="img_block"> <a href="#" class="content_block"><img src="images/tigr.jpg" /> <div class="over_block"></div> <span>Текст к картинке</span> </a> </div>


Прописываем свойства.Я думаю,что здесь для вас будет все понятно.


Стили CSS


.img_block .content_block { width:450px; /*ширина картинки*/ height: 440px; /*высота картинки*/ background:#f6f6f6; /*цвет фона*/ text-align:center; /*Выравнивание текста по центру*/ min-height:250px; /*Задает минимальную высоту элемента*/ font-family:Georgia, 'Times New Roman', Times, serif; /*семейство шрифта*/ font-weight:400; /*насыщенность шрифта*/ border-width: 4px; /* Толщина рамки */ border-style: solid; /* Стиль рамки*/ border-color: #DDDDDD; /*цвет рамки*/ box-shadow: 10px 10px 6px -6px #777777; /*Тень под блочным элементом*/ } .img_block a.content_block { display:block; /*Элемент показывается как блочный*/ position: relative; /*относительное позиционирование*/ overflow:hidden; /*Отображается область внутри элемента, остальное будет скрыто.*/ -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; /*эффект перехода между двумя состояниями элемента*/ cursor:pointer; /*вид курсора - рука*/ } .img_block a.content_block .over_block { background-color:rgb(0,0,255); /*цвет фона элемента*/ width:100%; height:100%; position:absolute; /*абсолютное позиционирование*/ top:0; /* расстояние от верхнего края*/ left:0; /* расстояние от левого края*/ z-index: 9900; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; transition:all 1s; } .img_block a.content_block:hover .over_block { display:block; background-color:rgba(255,0,0); } .img_block a.content_block span { background: rgb(0,0,255); width:100%; height:0px; text-transform:uppercase; font-size:14px; line-height:60px; position:absolute; display:block; bottom:0px; left:0; z-index: 9910; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .img_block a.content_block:hover span { bottom:0; height:60px; color: #ffffff; }