Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивая анимация заголовка изображения

Красивая анимация заголовка изображения

10 янв 2014 | Комментариев: 0 | Просмотров: 1598
Красивая анимация заголовка изображения
Красивый эффект анимации при наведении на картинку, у которой по верх отображается ее название. 
 
 
Разметка HTML
 


<div class="container">
     <img src="Путь до изображенияl" alt="image" />
     <article class="text">
         <h2><a href="#">Текст, который будет отображаться</a></h2>
     </article><!-- .text -->
 </div><!-- .container -->


CSS


.container{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

Скачать файл Скачек: 25 | Размер: 244,42 Kb
Демо-версия


Теги: анимация

Ссылка на новость:

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