Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 27 - июня Изображения
2487 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Покопавшись на просторах зарубежного инета нашел интересный HOVER EFFECTS,и я расскажу как это можно поставить к себе на сайт.
Итак приступим.
1.Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Вот код нашей картинки и текста добавляем туда где хотим это видеть

Код:
<div class="grid">

<figure class="effect-lily">
<img src="img/1.jpg" alt="img01"/>
<figcaption>
<h2>Nice <span>Lily</span></h2>
<p>Lily likes to play with crayons and pencils</p>
<a href="#">View more</a>
</figcaption>
</figure>

<!-- ... -->

</div>
3.И теперь эти стили добавляем в наш файл стилей
Код:
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
transition: transform 0.35s, color 0.35s;
transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
color: #fff;
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}
4.В исходнике много вариантов выбирайте который вам нужен

Можешь почитать и вот эту статейку "Правильная разметка Breadcrumb"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3317 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.108сек
  • Потребление памяти: 4.942 Mb 
  •   яндекс.ћетрика