Отображение подписи изображения при наведении мыши

demosourse

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

HTML

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

<ul class="grid cs-style-1">
    <li>
        <figure>
            <img src="images/1.png" alt="img01">
            <figcaption>
                <h3>Camera</h3>
                <span>Jacob Cummings</span>
                <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <!-- ... -->
        </figure>
    </li>
    <!-- ... -->
</ul>

Это стандартная структура нашей сетки изображений. Заметьте, что в 4-ом эффекте, мы поместили изображение в дополнительный контейнер.

У каждого эффекта будет свой класс. К примеру, “cs-style-1? для первого эффекта, “cs-style-2? для второго и так далее. Думаю, идея вам ясна.

Теперь давайте определим стили для изображений.

CSS

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

Перед вами общие стили для всех элементов. Сначала для самой сетки, а затем для каждого из контейнеров:

.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative;
}

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

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

.grid figure {
    margin: 0;
    position: relative;
}

Изначально максимальная ширина изображения будет 100%, а затем в медиа запросе мы изменим данное значение для элементов сетки:

.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

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

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}

И наконец, определим несколько стилей для текстовых элементов и ссылок:

.grid figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}

.grid figcaption span:before {
    content: 'by ';
}

.grid figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
}

Добавим префикс “by”, используя псевдо-класс :before. Конечно это можно сделать и через HTML, но такой способ позволить произвести быстрое редактирование, заменив на “made by” или “Designer: ”. Будьте внимательны, не удалите ничего личного!

В конце файла, определим CSS с медиа запросом и стилями для небольших экранов:

@media screen and (max-width: 31.5em) {
    .grid {
        padding: 10px 10px 100px 10px;
    }
    .grid li {
        width: 100%;
        min-width: 300px;
    }
}

Теперь давайте определим стили для эффектов.

Эффект 1

Начнём с очень простого эффекта. Панель с информацией будет появляться и сдвигаться чуть ниже и вправо, производя имитацию 3D слоя.

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

.cs-style-1 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    text-align: center;
    backface-visibility: hidden;
    transition: transform 0.3s, opacity 0.3s;
}

Так же добавляем свойство transition и backface-visibility, чтобы избежать неприятного для глаза скачка анимации. В принципе, это можно и не делать.

При наведении курсора мыши (или нажатии на сенсорном устройстве), прозрачности ставим значение 1 и анимируем переход:

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
    opacity: 1;
    transform: translate(15px, 15px);
}

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

.cs-style-1 figcaption h3 {
    margin-top: 70px;
}

.cs-style-1 figcaption span {
    display: block;
}

.cs-style-1 figcaption a {
    margin-top: 30px;
}

Эффект 2

Данный эффект поднимает изображение чуть выше и под ним отображает блок с дополнительной информацией.

Анимируем изображение при наведении курсора мыши:

.cs-style-2 figure img {
    z-index: 10;
    transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
    transform: translateY(-90px);
}

Свойству z-index задаём значение 10, чтобы быть уверенным, что изображение будет выше всего остального.

Размеры блока с информацией выставим 100%:

.cs-style-2 figcaption {
    height: 90px;
    width: 100%;
    top: auto;
    bottom: 0;
}

Расположим ссылку с правой стороны:

.cs-style-2 figcaption a {
    position: absolute;
    right: 20px;
    top: 30px;
}

Эффект 3

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

Сначала нам необходимо выставить настройку overflow скрытой (hidden):

.cs-style-3 figure {
    overflow: hidden;
}

При наведении курсором, перемещаем изображение на 50px вверх:

.cs-style-3 figure img {
    transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
    transform: translateY(-50px);
}

Панель с информацией будет отображаться так же, как и в предыдущем случае:

.cs-style-3 figcaption {
    height: 100px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

При наведении курсора, выставляем opacity значение 1 и перемещаем изображение вверх. Обратите внимание на то, как мы определяем анимацию. Одну для нормального состояния другую, которая будет активироваться при наведении курсора мыши. Так мы можем определить когда курсор заходит в нужную область и выходит. Сейчас будем применять анимацию при наведении курсора: время действия эффекта выставим 0.4 секунды. Обратное действие задаст прозрачности значение 0 и задержку 0.3 секунды. Благодаря этому, эффект будет смотреться более натурально.

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s, opacity 0.1s;
}

Не забудем про кнопку:

.cs-style-3 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 4

В этом примере, уже применим 3D эффект. Смысл в том, чтобы пролистнуть блок с подробной информацией, а само изображение сместить вправо.

Элемент списка будем использовать как контейнер, который будем анимировать в 3D пространстве:

.cs-style-4 li {
    perspective: 1700px;
    perspective-origin: 0 50%;
}

Всем потомкам родительского контейнера нужно выставить опцию transform-style:

.cs-style-4 figure {
    transform-style: preserve-3d;
}

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

.cs-style-4 figure > div {
    overflow: hidden;
}

Сдвинем изображение:

.cs-style-4 figure img {
    transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
    transform: translateX(25%);
}

Изначальная видимость блока с подробной информацией будет равна 0. Далее повернём её на 90 градусов по оси Y. В результате у нас будет эффект слайда:

.cs-style-4 figcaption {
    height: 100%;
    width: 50%;
    opacity: 0;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

При наведении курсора мыши, сделаем обратный поворот и отобразим сам блок:

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}

И снова стиль для кнопки:

.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 5

В этом примере мы уменьшим изображение и расположим его по центру, а на заднем фоне отобразим блок с контейнером.

Расположим изображение выше всего и зададим время анимации:

.cs-style-5 figure img {
    z-index: 10;
    transition: transform 0.4s;
}

При наведении курсора, уменьшаем размеры изображения:

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
    transform: scale(0.4);
}

Блок с информацией увеличиваем из центра:

.cs-style-5 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: scale(0.7);
    backface-visibility: hidden;
    transition: transform 0.4s, opacity 0.4s;
}

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
    transform: scale(1);
    opacity: 1;
}

Очень просто. И конечно же, расположим кнопку:

.cs-style-5 figure a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 6

Данный эффект, будет похож на предыдущий. На этот раз мы просто уменьшим само изображение, а блок с информацией оставим нетронутым.

Делаем те же действия с изображением, что и в предыдущем случае:

.cs-style-6 figure img {
    z-index: 10;
    transition: transform 0.4s;
}

.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
    transform: translateY(-50px) scale(0.5);
}

На этот раз никакой анимации для блока с информацией:

.cs-style-6 figcaption {
    height: 100%;
    width: 100%;
}

Расположим текстовые элементы:

.cs-style-6 figcaption h3 {
    margin-top: 60%;
}

.cs-style-6 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Эффект 7

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

Каждому элементу списка зададим собственную полицию:

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

Изображение будем отображать поверх всего остального:

.cs-style-7 figure img {
    z-index: 10;
}

Сам блок с информацией расширим до максимальных размеров:

.cs-style-7 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    backface-visibility: hidden;
    box-shadow: 0 0 0 0px #2c3f52;
    transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
}

При наведении курсора увеличим блок с информацией:

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
    opacity: 1;
    height: 130%;
    box-shadow: 0 0 0 10px #2c3f52;
}

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

.cs-style-7 figcaption h3 {
    margin-top: 86%;
}

.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
    opacity: 0;
    transition: opacity 0s;
}

.cs-style-7 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Реализуем задержку:

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
    transition: opacity 0.3s 0.2s;
    opacity: 1;
}

Надеемся, данные примеры вам пригодятся.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
Перевел: Станислав Протасевич
Урок создан: 12 Августа 2013
Просмотров: 27924
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Августа 2013 22:12
    TOIIOP
    Очень круто и работает везде -)
  • 13 Августа 2013 10:41
    asizintsev
    последний эффект больше всего понравился - круто!
  • 13 Августа 2013 11:33
    julicious
    а мне 5-й больше всех нравится! Конечно, выбор для любого случая. Спасибо за урок!
  • 13 Августа 2013 14:53
    rus_login
    В хроме не работает
  • 13 Августа 2013 15:44
    Dream_Killer
    rus_login, работает в хроме
  • 14 Августа 2013 14:54
    Larik29
    Даже в опере работает. Классно. Спасибо
  • 14 Августа 2013 18:10
    рыжик
    Подтверждаю, в Chome не работает (Win8).
    • 15 Августа 2013 13:44
      varganism
      Работает в хроме (Версия 28.0.1500.95 m) WIN7 x64 И вообще. Эти эффекты оптимизированны для движка web-kit. Обязаны работать.
      • 15 Августа 2013 20:15
        rus_login
        Такая же версия, тоже win7 x64. В опере, например, работает, в хроме нет. Ты думаешь мы врем что ли?
^ Наверх ^