Один из посетителей нашего сайта решил повторить эффект, который реализован на одной из страниц нашего сайта. Он заключается в том, что при наведении курсора мыши на изображение, картинка трансформируется и в нижней части изображения появляется подпись.
В этом уроке будет показано как при помощи CSS можно добиться такого же hover эффекта. Кроме того, будет рассказано как можно настроить анимацию под себя.
Шаг 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;
Для получения подробной информации о поддержке CSS-правил transform различными браузерами, посетите сайт caniuse.com.
- Для получения различных анимационных 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 эффект будет виден при наведении курсора мыши на изображение.
Демо-страница
Оригинал статьи - https://www.ostraining.com/blog/coding/transition-and-transform-css3/
