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

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

HIT

27.08.2015

2354

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

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

256999.660xp
rachel_mcadams
360851909

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

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

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Эффект наведения курсора на изображение Эффект наведения курсора на изображение Эффект наведения курсора на изображение
Настраиваем панель редактирования записей
Рекомендации для васНастраиваем панель редактирования записейOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.