Всплывающие подписи изображений

OriginalHoverEffects

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

Важно: описанные эффекты ниже, работают только в последних версиях браузеров (все версии поддерживающие  CSS3).

HTML разметкa
Структура разметки очень проста и интуитивно понятна. Создаем контейнер, который будет содержать нашу миниатюру картинки и все другие элементы.
Внутри контейнера с классом view вставим еще один контейнер с классом mask, он и будет отвечать за наши эффекты при наведение управляемых CSS3, внутри него мы разместим заголовок, описание и ссылку на полный обзор материала.

Смотреть Демо Скачать Исходники






В некоторых примерах нам придется немного модифицировать HTML разметку но об этом немного позже.

</pre>
<div class="line number1 index0 alt2"><code class="php plain">
<div </code><code class="php keyword">class</code><code class="php plain">=</code><code class="php string">"view"</code><code class="php plain">></code></div>
<div class="line number2 index1 alt1"><code class="php spaces"> </code><code class="php plain"><img src=</code><code class="php string">"image.gif"</code> <code class="php plain">/></code></div>
<div class="line number3 index2 alt2"><code class="php spaces"> </code><code class="php plain">
<div </code><code class="php keyword">class</code><code class="php plain">=</code><code class="php string">"mask"</code><code class="php plain">></code></div>
<div class="line number4 index3 alt1"><code class="php spaces"> </code><code class="php plain">
<h2>Title</h2>

</code></div>
<div class="line number5 index4 alt2"><code class="php spaces"> </code><code class="php plain">

Your Text

</code></div>
<div class="line number6 index5 alt1"><code class="php spaces"> </code><code class="php plain"><a href=</code><code class="php string">"#"</code> <code class="php keyword">class</code><code class="php plain">=</code><code class="php string">"info"</code><code class="php plain">>Read More</a></code></div>
<div class="line number7 index6 alt2"><code class="php spaces"> </code><code class="php plain"></div>

</code></div>
<div class="line number8 index7 alt1"><code class="php plain"></div>

</code></div>
<pre>

CSS
После создания нашей HTML разметки мы пропишем стили для каждого элемента.
В расположенном ниже коде мы устанавливаем общие правила для наших контейнеров, а затем мы будем добавлять отдельные стили для каждого из эффектов. Мы опускаем префиксы CSS3 при показе стилей.

.view {
 width: 300px;
 height: 200px;
 margin: 10px;
 float: left;
 border: 10px solid #fff;
 overflow: hidden;
 position: relative;
 text-align: center;
 box-shadow: 1px 1px 2px #e6e6e6;
 cursor: default;
 background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
 width: 300px;
 height: 200px;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0
}
.view img {
 display: block;
 position: relative
}
.view h2 {
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 position: relative;
 font-size: 17px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.8);
 margin: 20px 0 0 0
}
.view p {
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 12px;
 position: relative;
 color: #fff;
 padding: 10px 20px 20px;
 text-align: center
}
.view a.info {
 display: inline-block;
 text-decoration: none;
 padding: 7px 14px;
 background: #000;
 color: #fff;
 text-transform: uppercase;
 box-shadow: 0 0 1px #000
}
.view a.info:hover {
 box-shadow: 0 0 5px #000
}

А теперь давайте рассмотрим каждый из десяти представленных эффектов подробнее.

Пример 1

OriginalHoverEffect01

Добавим специальный дополнительный класс для основного контейнера view  для этого эффекта. Мы будем добавлять новый специальный класс для каждого примера для простоты названия класса для каждого примера будем присваивать по номеру примера: view-firstview-secondview-third, и т.д.

<div class="view view-first">

В этом первом примере мы будем использовать только некоторые основные переходы, чтобы создать красивый эффект парения.

.view-first img {
 transition: all 0.2s linear;
}
.view-first .mask {
 opacity: 0;
 background-color: rgba(219,127,8, 0.7);
 transition: all 0.4s ease-in-out;
}
.view-first h2 {
 transform: translateY(-100px);
 opacity: 0;
 transition: all 0.2s ease-in-out;
}
.view-first p {
 transform: translateY(100px);
 opacity: 0;
 transition: all 0.2s linear;
}
.view-first a.info{
 opacity: 0;
 transition: all 0.2s ease-in-out;
}

И вот основная часть нашего эффекта. При наведение мыши на изображении, мы используем свойство задержки для эмуляции простой анимации. Эффект задержки, что мы используем в классе при наведении могут быть изменены, чтобы отличаться, чем в обычном классе. В этом примере мы не использовали каких-либо задержек в обычном классе; но мы добавили задержку при наведении, который поможет начать переход немного позже. Перемещение мыши из, значение по умолчанию 0s будет применяться, и «обратного» будет быстрее.

.view-first:hover img {
 transform: scale(1.1);
}
.view-first:hover .mask {
 opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
 opacity: 1;
 transform: translateY(0px);
}
.view-first:hover p {
 transition-delay: 0.1s;
}
.view-first:hover a.info {
 transition-delay: 0.2s;
}

 

Пример 2

OriginalHoverEffect02
Во втором примере мы добавим специальный класс view-second, но мы оставим контейнер с классом mask пустым и обернем описание в новый DIV с классом content

<div class="view view-second">
 <img src="images/5.jpg" />
 <div class="mask"></div>
 <div class="content">
  <h2>Стиль номер #2</h2>
 <p>ваш текст</p>
 <a href="#" class="info">Read More</a>
 </div>
 </div>

Контейнер с классом mask будет иметь различные атрибуты, чтобы удовлетворить нашу силу, на самом деле мы собираемся применить преобразования собственности (translate и rotate) и сделает квадрат из него. Описание элементов будут переведены, то есть перемещается так, что мы можем сдвиньте их при наведении :

.view-second img {
 transition: all 0.2s ease-in;
}
.view-second .mask {
 background-color: rgba(115,146,184, 0.7);
 width: 300px;
 padding: 60px;
 height: 300px;
 opacity: 0;
 transform: translate(265px, 145px) rotate(45deg);
 transition: all 0.2s ease-in-out;
}
.view-second h2 {
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: translate(200px, -200px);
 transition: all 0.2s ease-in-out;
}
.view-second p {
 transform: translate(-200px, 200px);
 transition: all 0.2s ease-in-out;
}
.view-second a.info {
 transform: translate(0px, 100px);
 transition: all 0.2s 0.1s ease-in-out;
}

Для нашего наведении эффект мы используем перевести преобразование для того, чтобы двигаться наши элементы на месте. Маска также будет вращаться. Элементы описания будут друг пришел с небольшой задержкой:

.view-second:hover .mask {
 opacity:1;
 transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
 transform: translate(0px,0px);
 transition-delay: 0.3s;
}
.view-second:hover p {
 transform: translate(0px,0px);
 transition-delay: 0.4s;
}
.view-second:hover a.info {
 transform: translate(0px,0px);
 transition-delay: 0.5s;
}

Пример 3

OriginalHoverEffect03
В этом третьем примере мы будем использовать translate и rotate преобразования воспитывать наше содержание:

.view-third img {
 transition: all 0.2s ease-in;
}
.view-third .mask {
 background-color: rgba(0,0,0,0.6);
 opacity: 0;
 transform: translate(460px, -100px) rotate(180deg);
 transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
 transform: translateY(-100px);
 transition: all 0.2s ease-in-out;
}
.view-third p {
 transform: translateX(300px) rotate(90deg);
 transition: all 0.2s ease-in-out;
}
.view-third a.info {
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out;
}

Эти простые инструкции, которые применяются при наведении. Теперь обратного появляться описания элементов по соответствующим установив переходный задержку:

.view-third:hover .mask {
 opacity:1;
 transition-delay: 0s;
 transform: translate(0px, 0px);
}
.view-third:hover h2 {
 transform: translateY(0px);
 transition-delay: 0.5s;
}
.view-third:hover p {
 transform: translateX(0px) rotate(0deg);
 transition-delay: 0.4s;
}
.view-third:hover a.info {
 transform: translateY(0px);
 transition-delay: 0.3s;
}

Пример 3

OriginalHoverEffect04
Здесь, в четвертом примере мы будем выполнять простые Увеличить изображение и зум в нашей содержания с вращением, все благодаря шкале преобразования. Мы установили переходный задержку в 0,2 секунды для стиля изображения, но при наведении мы будем говорить, что это 0 секунд. Это позволит начать сразу при наведении, но задержать его на мыши вне.

.view-fourth img {
 transition: all 0.4s ease-in-out 0.2s;
 opacity: 1;
}
.view-fourth .mask {
 background-color: rgba(0,0,0,0.8);
 opacity: 0;
 transform: scale(0) rotate(-180deg);
 transition: all 0.4s ease-in;
 border-radius: 0px;
}
.view-fourth h2{
 opacity: 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transition: all 0.5s ease-in-out;
}
.view-fourth p {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}

Эти простые инструкции, чтобы получить эффект — с CSS3 вы можете делать все :

.view-fourth:hover .mask {
 opacity: 1;
 transform: scale(1) rotate(0deg);
 transition-delay: 0.2s;
}
.view-fourth:hover img {
 transform: scale(0);
 opacity: 0;
 transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
 opacity: 1;
 transition-delay: 0.5s;
}

Example 5

OriginalHoverEffect05

В этом пятом примере мы будем использовать свойство переводить вместе с переходным-временной-функции простота In-Out для того, чтобы скользить содержание с левого.


.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}

Эффект парения сделает слайд-вправо и описание приходят слева, как будто это толкает изображение:


.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}

Example 6

OriginalHoverEffect06

В этом примере мы сделаем описание приехать с фронта, не масштабирование, пока его первоначального размера (шкала от фактора 10 до 1).Кнопка Информация будет скользить из нижней (перевод).


.view-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
background-color: rgba(146,96,91,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
opacity:0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
opacity:0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}

Обратный переход будет отложен таким образом, что она выглядит гладкой:


.view-sixth:hover .mask {
 opacity:1;
 transition-delay: 0s;
}
.view-sixth:hover img {
 transition-delay: 0s;
}
.view-sixth:hover h2 {
 opacity: 1;
 transform: scale(1);
 transition-delay: 0.1s;
}
.view-sixth:hover p {
 opacity:1;
 transform: scale(1);
 transition-delay: 0.2s;
}
.view-sixth:hover a.info {
 opacity:1;
 transform: translateY(0px);
 transition-delay: 0.3s;
}

Example 7

OriginalHoverEffect07

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


.view-seventh img{
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}

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


.view-seventh:hover img{
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}

Example 8

OriginalHoverEffect08

В этом восьмом примере мы будем использовать анимацию и воссоздать отказов эффект.Описание отказов в сверху.


.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}

Мы добавим анимацию для маски элемента и определить некоторые подходящие для задержки начала описания элементов:


.view-eighth:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}

Для воссоздания истинного отказов эффект мы используем translateY, как вы можете видеть, что есть пара кадров, для того, чтобы эффект:


@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Example 9

OriginalHoverEffect09

В этом примере, мы будем использовать два элемента маски, чтобы скользить их из нижней правой и левой верхней:


 <div class="view view-ninth">
 <img src="images/11.jpg" />
 <div class="mask mask-1"></div>
 <div class="mask mask-2"></div>
 <div class="content">
 <h2>Hover Style #9</h2>
 <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
 <a href="#" class="info">Read More</a>
 </div>
 </div>

Два маски будет иметь различный перевод и transfrom происхождение. Кроме того, мы установим один, чтобы быть выверен на верхней и другой внизу:


.view-ninth .mask-1,
.view-ninth .mask-2{
background-color: rgba(0,0,0,0.5);
height: 361px;
width: 361px;
background: rgba(119,0,36,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}

Содержание будет в стиле образом, что она выглядит как как будто это выходит как крошечный кусочек через трогательных краями двух масок:

.view-ninth .content{
 background: rgba(0,0,0,0.9);
 height: 0px;
 opacity: 0.5;
 width: 361px;
 overflow: hidden;
 transform: rotate(-33.5deg) translate(-112px,166px);
 transform-origin: 0% 100%;
 transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
 background: transparent;
 margin-top: 5px;
 border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
 display: none;
}

При наведении курсора, мы сделаем содержание выйти из гнезда и сделать маски коснуться по краям:


.view-ninth:hover .content{
height: 120px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
transition-delay: 0s;
}
.view-ninth:hover .mask-1{
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
transform: rotate(56.5deg) translateX(-1px);
}

Мы установки переходного задержки для масок таким образом, что при наведении, переход происходит мгновенно. Но при движении с помощью мыши, задержка будет больше, так как если его «ждет» содержание, чтобы вернуться в гнездо.

Example 10

OriginalHoverEffect10

В последнем примере, мы будем увеличивать изображения и сделать его исчезать, а чего descpription на фронт. Мы можем сделать это, используя шкалу преобразования и установив уровень непрозрачности:

.view-tenth img {
 transform: scaleY(1);
 transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
 background-color: rgba(255, 231, 179, 0.3);
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth h2{
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: scale(0);
 color: #333;
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth p {
 color: #333;
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}
.view-tenth a.info {
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}

При наведении курсора, мы просто масштабировать изображение вверх и исчезают его, уменьшая его непрозрачность до 0:


.view-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}

вывод
CSS3 имеет действительно большой потенциал для создания замечательных эффектов. Вскоре мы надеемся, будет в состоянии избежать использования JavaScript для простых эффектов и полагаться на 100% на CSS, в всех браузерах.
Я надеюсь, что Вам понравились эти эксперименты, но, прежде всего, я надеюсь, что они могут вдохновить вас для ваших проектов.

Смотреть Демо Скачать Исходники






Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Источник: babyrent.lviv.ua/