При наведении курсора мыши на изображение, картинка трансформируется и в нижней части изображения появляется подпись.
Шаг 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 эффект будет виден при наведении курсора мыши на изображение.