Галерея + Hover эффект

Создание галереи изображений с симпатичным hover эффектом.

Оборачиваем необходимые изображения в div с классом gallery2

Остальное делает скрипт

// Галерея изображений + Hover эффект при наведении на изображение
$(".hovergallery").find('a:has(img)').wrap( "<span></span>" );

CSS

/* Hover эффект над изображениями с ссылкой на оригинал */


.hovergallery {
padding: 40px 0;
width: 100%;
margin: 0 auto !important;
clear: both;
position: relative;
overflow: hidden;
box-sizing: border-box;
}

.hovergallery span {
 width: 24%;
 margin: 0 0.5%;
 height: 200px;
 float: left;
 margin-bottom: 20px !important;
 list-style: none;		
}
  
@media (min-width:1400px) { .hovergallery span {width: 19%;} }   
 
@media (max-width:1020px) { .hovergallery span { width: 32%;} }    
  
@media (max-width:500px) { .hovergallery span {width: 48%; margin: 0 1%;} }  
  
@media (max-width:300px) { .hovergallery span {width: 100%;} }    
  
  
.hovergallery a {
 display: block;
 position: relative;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;	  
}

.hovergallery a:before {
 position: absolute;
 width: 32px;
 height: 28px;
 top: 40%;
 left: 50%;
 margin: -14px 0 0 -10px;
 /*background: url(http://wp-lessons.com/wp-content/uploads/2015/01/magnifier.png) no-repeat;*/
 content: '\f002';
 font-family: FontAwesome;
 color: #fff;
 font-size: 18px;
 opacity: 0;
 z-index: 1;
 -webkit-transition: all 0.3s linear;
 transition: all 0.3s linear;
}

.hovergallery a:hover:before {
 top: 50%;
 opacity: 1;
}

.hovergallery a:after {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 background: rgba(0, 0, 0, 0.5);
 content: '';
 opacity: 0;
 -webkit-transition: all 0.3s linear;
 transition: all 0.3s linear;
}

.hovergallery a:hover:after {
 opacity: 1;
}

.hovergallery a img {
padding: 0;
margin: 0;
position: absolute;
width: auto !important;
min-height: 100%;
max-width: none !important;
transition: transform 0.5s;  
}

.hovergallery a:hover img {
-webkit-transform: translateX(-25px);
  -moz-transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -o-transform: translateX(-25px);
  transform: translateX(-25px);	
}


.hovergallery br {
display:none;
}

Шорт-код данной галереи — gallery2. Чтобы добавить на сайте — надо вставить в funсtions.php

function gallery2( $atts, $content = null ) { 
 return '<div class="hovergallery">'.$content.'</div>'; 
} 
add_shortcode( 'hovergallery', 'gallery2' );

Поделиться в соц. сетях: