Главная Интернет Как сделать hover-эффект над картинкой с помощью CSS3?
Баннер

Как сделать hover-эффект над картинкой с помощью CSS3?

Полезное - Интернет

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

Шаг 1. HTML-код

Добавьте следующий код на страницу вашего сайта:

HTML

<div class="block">

  <img src="/1.jpg" title="" alt="" />

  <div class="block-caption">Заголовок изображения</div>

</div>

Шаг 2. CSS-правила

Добавьте следующий CSS-код в файл стилей вашего сайта:

CSS

.block {

    display: block;

    height: 425px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

    width: 640px;

}

.block img {

    transition: all 1s ease-in-out 0s;

    -moz-transition: all 1s ease-in-out 0s;

    -webkit-transition: all 1s ease-in-out 0s;

    -o-transition: all 1s ease-in-out 0s;

}

.block .block-caption {

    background: rgba(0,0,0,0.6);

    bottom: 0;

    color: #fff;

    display: table;

    left: 0;

    opacity: 0;

    padding: 10px 0;

    position: absolute;

    transition: all 0.2s ease-in-out 0s;

    -moz-transition: all 0.2s ease-in-out 0s;

    -webkit-transition: all 0.2s ease-in-out 0s;

    -o-transition: all 0.2s ease-in-out 0s;

    width: 640px;

}

.block:hover .block-caption {

    opacity: 1;

}

.block:hover img {

    transform: scale(1.5) rotateZ(-5deg);

    -moz-transform: scale(1.5) rotateZ(-5deg);

    -webkit-transform: scale(1.5) rotateZ(-5deg);

    -o-transform: scale(1.5) rotateZ(-5deg);

}

Если у вас сайт на CMS (Joomla, WordPress или Drupal), возможно для добавления CSS-стилей придется написать плагин или воспользоваться готовым.

Шаг 3. Кастомизируем CSS под себя

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

Размер изображения: измените значения в приведенном выше коде на свои;

Чтобы отображать блок с изображением в центре родительского блока укажите значение margin равное 0 auto;

CSS

.block {

    height: 425px;

    margin: 0 auto;

    width: 640px;

}

Измените значение свойств transition у изображения и блока с подписью;

У блока с подписью ширина должна быть такой же как у изображения;

CSS

.block img {

    transition: all 1s ease-in-out 0s;

    -moz-transition: all 1s ease-in-out 0s;

    -webkit-transition: all 1s ease-in-out 0s;

    -o-transition: all 1s ease-in-out 0s;

}

.block .block-caption {

    transition: all 0.2s ease-in-out 0s;

    -moz-transition: all 0.2s ease-in-out 0s;

    -webkit-transition: all 0.2s ease-in-out 0s;

    -o-transition: all 0.2s ease-in-out 0s;

    width: 640px;

}

CSS-cвойства transform поддерживаются не всеми браузерами, поэтому помимо стандартного свойства, приходится использовать нестандартные (с префиксами браузеров):

transform: стандартное правило;

-webkit-transform: Chrome и Safari;

-moz-transform: Firefox;

-o-transform: Opera;

Для получения различных анимационных hover эффектов, поэкспериментируйте над значениями scale(), rotateZ() и rotateY();

CSS

.block:hover img {

    transform: scale(1.5) rotateZ(-5deg);

    -moz-transform: scale(1.5) rotateZ(-5deg);

    -webkit-transform: scale(1.5) rotateZ(-5deg);

    -o-transform: scale(1.5) rotateZ(-5deg);

}

Шаг 4. Просмотр результата

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

 
Баннер

Популярные вопросы