CSS : Красивое увеличение картинок на CSS3
Написал MACTEP в 22.03.2014 13:20:00 ( 19781 прочтений )

Русская баня В свое время была написана статья Красивый вывод картинок с помощью jQuery.

Сейчас назрела потребность в красивом увеличении картинок по наведению. И никаких JS! Но пользователи старых браузеров ничего не увидят. Так им и надо.



В интернете ничего законченного не нашел, или используется position: absolute, или контент разъезжается, уступая место картинке, что не всегда приемлемо.

Итак, приступим. Все, что надо указать - задать класс картинке. Задавать будем, как всегда, отдельно для левых, отдельно для правых, и отдельно для центра. Это связано с особенностью увеличения картинки. Ведь, если картинка слева, при увеличении она должна сдвигаться вправо, иначе на мелких мониторах картинка уплывет за пределы браузера.

 

Русская баня

код HTML для картинки, выведенной слева (картинка увеличивается, подведите мышку к картинке):


<img class="img left" src="imgleft.jpg">

 

И немного CSS, где указываем размер миниатюры, место расположения (слева), обтекание, а так же увеличение картинки при наведении:

img.img.left{
	float:left;
	margin:5px 15px 5px 0;
	max-height: 320px;
	max-width: 320px;
	}
img.img.left:hover{
	transform:scale(2) translate(70px, 30px);
	transition: all 0.3s linear 0.3s;
	}

 

Почти то же самое для картинок справа
<img class="img right" src="imgright.jpg">

 

 

И CSS отличается только расположением миниатюры (справа) и сдвигом влево при увеличении: 

img.img.right{
	float:right;
	margin:5px 0 5px 15px;
	max-height: 320px;
	max-width: 320px;
	}
img.img.right:hover{
	transform:scale(2) translate(-69px, 30px);
	transition: all 0.3s linear 0.3s;
	}

 

 

А теперь выведем миниатюру для центра:
HTML:
<img class="img center" src="imgcenter.jpg">

 

CSS: 

img.img.center{
	margin:5px auto;
	display: block;
	max-height: 320px;
	max-width: 320px;
	}

img.img.center:hover {
	transform:scale(2);
	transition: all 0.3s linear 0.3s;
	}

 

Обобщаем CSS и добавляем красоты: 

img.img.left{
float:left;
margin:5px 15px 5px 0;
}
img.img.right{
float:right;
margin:5px 0 5px 15px;
}
img.img.center{
margin:5px auto;
display: block;
}
img.img {
max-height: 320px;
max-width: 320px;
transition: all 0.3s linear 0s;
z-index: 1;
border: 1px solid #EEE;
background: #FFFFFF;
padding: 5px;
}
img.img:hover {
cursor:pointer;
box-shadow: 0 0 5px 5px #eee;
border: 1px solid #25A0E3;
z-index: 10;
transition: all 0.3s linear 0.3s;
}
img.img.left:hover{
transform:scale(2) translate(88px, 30px);
}
img.img.right:hover{
transform:scale(2) translate(-88px, 30px);
}
img.img.center:hover {
transform:scale(2);
}
Сделал задержку увеличения картинки на 0.3с. Что бы при перемещении мышки через картинку, она не увеличивалась.


Теги: CSS3   Увеличение   Картинка  
Предыдущая новость Следующая новость
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

3 пользователь(ей) активно (1 пользователь(ей) просматривают Web)

Участников: 0
Гостей: 3

далее...

Рекомендуем

Ссылки

Радиолюбительский портал.

В чем основные преимущества и недостатки нетбуков.