Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Анимация для превью на CSS

Анимация для превью на CSS

Опубликовал: artCreative™
Категория: Вид материалов и комментариев
Дата: 19 Июня 2025 в 02:40

0 голосов

Пользователь, зайдя на страницу со списком новостей, обратит внимание только на заголовок. Фон этого заголовка – превью для той или иной новости. Страница буде выглядеть оригинально, ярко и живо. Рассмотреть изображение можно только при наведении на него: заголовок исчезает, картинка увеличивается, пропадает наложенное размытие. Откройте демо, там наглядно показано применение CSS кода для анимации превью.

В нужное место ставим:

Код

<a href="#" class="thumbnail green"><img src="http://dribbble.s3.amazonaws.com/users/10958/screenshots/138461/pushok.png">Название</a>

<a href="#" class="thumbnail blue"><img src="http://dribbble.s3.amazonaws.com/users/10958/screenshots/290147/zoimp_small.jpg">Название</a>

<a href="#" class="thumbnail red"><img src="http://dribbble.s3.amazonaws.com/users/107759/screenshots/606234/sports-car-illustration.png">Название</a>

<a href="#" class="thumbnail purple"><img src="http://dribbble.s3.amazonaws.com/users/13307/screenshots/647753/heart.png">Название</a>

B css:

Код

body {
  margin: 40px;
}

.thumbnail {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 220px;
  background: #fff;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}
.thumbnail.green {
  background: #1b5a2a;
}
.thumbnail.blue {
  background: #1c3c5a;
}
.thumbnail.red {
  background: #5a1f1a;
}
.thumbnail.purple {
  background: #331f5a;
}
.thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  filter: blur(2px);
}
.thumbnail .title {
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  text-align: center;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}
.thumbnail:hover {
  z-index: 999;
  -webkit-transform: scale(1.1) rotate(0.1deg);
  -moz-transform: scale(1.1) rotate(0.1deg);
  transform: scale(1.1) rotate(0.1deg);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
.thumbnail:hover .title {
  -webkit-transform: scale(0.85) rotate(0.1deg);
  -moz-transform: scale(0.85) rotate(0.1deg);
  transform: scale(0.85) rotate(0.1deg);
  color: rgba(255, 255, 255, 0);
}
.thumbnail:hover img {
  opacity: 1;
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  filter: blur(0);
}
.thumbnail:active {
  -webkit-transform: scale(1.08) rotate(0.1deg);
  -moz-transform: scale(1.08) rotate(0.1deg);
  transform: scale(1.08) rotate(0.1deg);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7);
}
.thumbnail:active img {
  opacity: 0.7;
}

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 597 « Назад

Теги материала: css, превью, анимация, на, для

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Анимация для превью на CSS

Анимация для превью на CSS

Комментарии пользователей