В данном посте буду собирать различные эффекты и подходы при наведении на изображение.
Всплывающая иконка
Верстка изображений с эффектом наведения: необходимо изображения (одно или несколько) обернуть в div с классом gallery1.
Сделал шорткод с нужным дивом, так что просто необходимо изображения вставить в шорткод gallery1
Для использования шорткода нужно вставить в файл functions
// Добавление шорткода галереи
function gallery1( $atts, $content = null ) {
return '<div class="zoomgallery">'.$content.'</div>';
}
add_shortcode( 'zoomgallery', 'gallery1' );
CSS
/* Галерея + Эффект при наведении на изображение*/
.img-zoom {
width: 19%;
margin: 0 0.5% 15px 0.5%;
height: 200px;
overflow: hidden;
position: relative;
cursor: pointer;
float: left;
}
.img-zoom img {
opacity: 1 !important;
height: 100% !important;
width: auto !important;
max-width: none !important;
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.img-zoom:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.img-zoom span {
top: 0;
left: 0;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.img-zoom span:before {
position: relative;
background-color: rgba(0, 0, 0, 0.5);
padding: 10%;
top: 85px;
border-radius: 100%;
content: '\f002';
font-family: FontAwesome;
color: #fff;
box-shadow: 0 0 2px #111;
text-shadow: 1px 1px 6px #000;
font-size: 18px;
opacity: 0;
z-index: 1;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.img-zoom:hover span:before {
opacity: 1;
}
.img-zoom:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.zoomgallery br {
display: none;
}
Скрипт который оборачивает ссылку в div class=img-zoom и добавляет, а потом выводит span с иконкой при наведении
// Эффект при наведении на изображение
$(document).ready(function() {
$(".zoomgallery").find('a:has(img)').wrap( "<div class='img-zoom'></div>" );
$('.img-zoom img').after(function() {
return '<span></span>';
});
});
Различные варианты подобных эффектов доступны при подключении библиотеки ihover.
Простой эффект прозрачности
При наведении, изображение с ссылкой плавно станет немного прозрачнее
a img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
-khtml-opacity: 1;
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
border:0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.3s linear;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
opacity: 0.7;
}
[site-socialshare]
