Ваш IP: 3.143.23.38
Изменить стиль
Главная » Файлы » 5. CSS эффекты » Шторка на изображение - CSS

Шторка на изображение - CSS


Шторка которая появляется на изображении при наведении на него курсором.

Установка:

В CSS ставим:
Код
.container {  
  width: 300px;  
  height: 200px;  
  position: relative;  
  overflow: hidden;  
  margin: 2px;  
  float: left;  
  }  

  .container a {  
  vertical-align: middle;  
  color: #fff;  
  text-decoration: none;  
  font-size: 18px;  
  font-family: Verdana;  
  font-weight: 100;  
  }  

  .container img {  
  width: 300px;  
  height: 200px;  
  }  
  .description {  
  padding-top: 20px;  
  height: 40px;  
  width: 300px;  
  background: #000;  
  opacity: 0.7;  
  filter: alpha(opacity=30); /* IE lt 8 */  
  -ms-filter: "alpha(opacity=30)"; /* IE 8 */  
  -webkit-transition: 1s;  
  -moz-transition: 1s; /* Firefox 4-15 */  
  -o-transition: 1s; /* Opera 10.5–12.00 */  
  transition: 1s; /* Firefox 16+, Opera 12.50+ */  
  position: absolute;  
  bottom: -60px;  
  text-align: center;  
  }  

  .container:hover .description {  
  bottom: 0px;  
  }  
  


В нужное место:
Код
<div class="container">  
  <img src="img/1.jpg" alt="" class="start">  
  <div class="description">  
  <a href="">Красивая девушка</a>  
  </div>  
  </div>


ДЕМО


  Мне Нравится 0


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








Счётчик материалов

     60 - Комментариев
     142 - Тем форума
     2694 - Постов форума
     31 - Фотографий
     11 - Новостей
     301 - Скачиваний
     5 - Видео

Новые пользователи

Популярные теги

Статистика сайта

Кто сегодня был?
Хостинг от uCoz
счетчик хитов сайта
Хиты сайта