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

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

HIT

27.08.2015

1376

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

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

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; 
}

Поделится информацией с друзьями

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

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

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

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