Эффект наведения курсора на изображение

В данном посте буду собирать различные эффекты и подходы при наведении на изображение.

Всплывающая иконка

Верстка изображений с эффектом наведения: необходимо изображения (одно или несколько) обернуть в div с классом 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; 
}