закрыть

шаблоны для MaxSite CMS от RuTheme

Плавное увеличение изображения на CSS3 (без скриптов).

Плавное увеличение изображения на CSS3 (без скриптов).

Плавное увеличение изображения при наведении курсора.

Часто людям у которых есть свой сайт хочется его приукрасить какими-то фишками, например плавным увеличением изображения при наведении или при клике на него.

По какой-то причине многие сразу задумываются о скриптах, начинают искать в интернете готовые решения, плагины jquery и т.д., хотя время не стоит на месте и вместо того чтобы перегружать свой сайт лишними запросами, можно просто в уже существующем файле стилей прописать пару классов, которые никак не скажутся на производительности.


Итак, у нас есть, например, такая структура HTML:


1) просто изображения с определенным классом, идущие друг за другом; (в этом варианте при наведении не очень красиво ведут себя соседние картинки, поэтому-то мы сделали еще 2 варианта с блоками)

2) горизонтально выведенные блоки с изображениями в них;

3) вертикально выведенные блоки с изображениями в них.


<h2>3 картинки подряд</h2>
	
	<div class="block-img">
		<img src="1.jpg" class="image" alt="" title="Картинка 1"/>
		<img src="2.jpg" class="image" alt="" title="Картинка 2"/> 
		<img src="3.jpg" class="image" alt="" title="Картинка 3"/>
	</div>
	<br clear="all" />
<h2>Каждая картинка в своем блоке</h2>
	
	<div class="block-img">
		<div class="block"><img src="1.jpg" class="image" alt="" title="Картинка 1"/></div>
		<div class="block"><img src="2.jpg" class="image" alt="" title="Картинка 2"/></div>
		<div class="block"><img src="3.jpg" class="image" alt="" title="Картинка 3"/></div>
	</div>
	<br clear="all" />
<h2>Каждая картинка в своем блоке вертикально</h2>
	
	<div class="block-img">
		<div class="block-vert"><img src="1.jpg" class="image" alt="" title="Картинка 1"/></div>
		<div class="block-vert"><img src="2.jpg" class="image" alt="" title="Картинка 2"/></div>
		<div class="block-vert"><img src="3.jpg" class="image" alt="" title="Картинка 3"/></div>
	</div>
	<br clear="all" />

Зададим параметры стиля изображений в обычном состоянии.


img.image {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: whiteSmoke;
width: 200px;
border: 15px solid whiteSmoke;
margin: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
vertical-align: middle;
}

и в состоянии при на ведении мыши


img.image:hover {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
width: 300px;
margin: -40px;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
z-index: 200;
}

Обратите внимание на строчки типа

-webkit-transition: all 0.3s ease-in;

-moz-transition: all 0.3s ease-in;

-o-transition: all 0.3s ease-in;

-ms-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;


Именно они и будут обеспечивать плавность переходов при увеличении и уменьшении изображений.


Так же добавим стили к блокам в которых находятся наши изображения:


.block-img {
display: table;
margin: 0 auto;
padding: 30px;
}
.block {
display: table-cell;
float: left;
height: auto;
min-height: 180px;
width: 250px;
}
.block-vert {
height: 160px;
width: 250px;
}
.block img.image  {
margin: 0;
}
.block-vert img.image  {
margin: 0;
}

Вот и все.


При копировании материала ссылка на данную статью обязательна.


Комментариев: 24 RSS
14 Февраля 2013 в 21:02:14
Аноним
1

Но картинку же не увеличивает а просто растягивает... вот бы можно было реально подгружать увеличенную.

14 Февраля 2013 в 21:04:01
Аноним
2

Надо прописывать position:absolute а то все дергается...

14 Февраля 2013 в 21:22:40
3
Но картинку же не увеличивает а просто растягивает

Да, в этом примере картинка просто масштабируется. Можно пойти другим способом - вывести миниатюру и скрыть еще один блок с изображением бОльшего размера и при наведении на миниатюру показывать этот блок, но в любом случае динамически изображения средствами css не подгрузить.

Надо прописывать position:absolute а то все дергается...

Дергаются только изображения, которые идут подряд - первый пример. Поэтому и был приведен следующий пример в Div блоках, без подергиваний.

05 Июня 2013 в 19:50:34
Аноним
4

А каким образом управлять величиной растягивания?

05 Июня 2013 в 20:29:39
5

Надо играть соотношением ширины картинки (width) и ее отступа (margin).

Например, если изменить css стиль при наведении на изображение таким образом

img.image:hover { 
...
width: 340px;
margin: -50px;
...
}

то картинка увеличится при наведении еще сильнее.

27 Июля 2013 в 19:08:20
Вадим
6

Спасибо, дружище, за отличный пример!

27 Июля 2013 в 19:50:09 27 Ноября 2013 в 15:08:10
Сергей
8

А реализовать тоже самое только по клику не подскажете как?

29 Ноября 2013 в 19:27:12
9

Можно сделать средствами CSS увеличение изображения при нажатии на него,но для того чтобы сделать по клику нужен javascript.

16 Декабря 2013 в 11:36:46
timmy
10

не работает в internet explorer 10. в хроме и мозилле все работает

03 Февраля 2014 в 18:29:35
Чингис
11

Как сделать чтобы увеличивалась вверх и при увеличении наползала на слайдер?

04 Февраля 2014 в 01:53:32
12

Я не понял Ваш вопрос, поэтому не могу ничего конкретного подсказать.

Для того чтобы картинка увеличивалась вверх и в стороны, а не по центру, как в примере, надо изменить значение margin-top: -50px; у класса img.image:hover (при наведении курсора на картинку).

16 Февраля 2014 в 18:59:25
Чингис
13

Привет! картинка увеличивается только вниз-право =((

попробовал дописать margin-top: -50px не помогло

16 Февраля 2014 в 22:54:47
14

Сложно сказать, не видя вживую. Давайте ссылку на ваш слайдер, посмотрим, может что-то и подскажу.

19 Февраля 2014 в 15:32:40
Аноним
15

спасибо за отличный пример! Я постивила эту картинку с таблицу и она растягивает длину строки при наведении, как этогои збежать?

19 Февраля 2014 в 21:16:47
16

Не могу сказать точно, но похоже вам надо в стиле img.image изменить значение position: relative; на position: absolute;

22 Апреля 2014 в 14:31:59
Crimex
17

Да грузите изначально большое 300х300 но уменьшаете его средствами стиля height и тд как вам нужно 100х100 к примеру, а увеличение уже до 300 делаете через этот скрипт, и не будет растягиваться маленькая картинка, будет все красиво.

08 Июня 2014 в 20:15:25
Эдуард
18

Стиль применяется ко всем изображениям. Не подскажите как применить стиль конкретно к одному изображению?

12 Июня 2014 в 00:33:55
19

Присваиваете каждой картинке свой класс и прописываете свой стиль для каждого класса.

<img class="img_1" src="...">
<img class="img_2" src="...">
<img class="img_3" src="...">

в css пишите что-то вроде этого

.img_1 {
свои стили
}
.img_2 {
свои стили 2
}
.img_3 {
свои стили 3
}

Или можете использовать псевдоклассы css, которые считают элементы, например, :nth-child.

Пишете в css img:nth-child(1) {стили} img:nth-child(2) {стили 2} img:nth-child(3) {стили 3}, в скобочках номер картинки по порядку. Тут уже каждой картинке можно не писать классы.

Лучше картинки заключать в div с определенным классом и через него прописывать стили, тогда они будут применяться только к изображениям в данном div-блоке.

<div class="images_block ">
<img class="img_1" src="...">
<img class="img_2" src="...">
<img class="img_3" src="...">
</div>

а в стилях уже писать

.images_block .img_1 {стили}
или
.images_block img:nth-child(1) {стили}
20 Августа 2014 в 23:39:09
Кирилл
20

Увеличивается плавно а когда отвожу курсор, картинки резко становятся на место. Хотелось бы, чтоб они плавно возвращались назад)

21 Августа 2014 в 18:14:12
21

Какой у Вас браузер? В коде css предусмотрены оба варианта плавности как при увеличении, так и при уменьшении картинки. В Chrom, FF, IE10 и Opera увеличение и уменьшение картинок работает исправно!

05 Ноября 2014 в 19:47:20
Олег
22
Привет! картинка увеличивается только вниз-право =((
попробовал дописать margin-top: -50px не помогло

Для этого в css надо сначала прописать стили к блокам (.block-img и т.д.),

а потом уже параметры стилей изображений (img.image и img.image:hover).

Надо в статье поправить, а то чайникам таким как я непонятно.

23 Января 2015 в 20:13:30
Александр
23

Отличный код, я воспользовался, но есть некоторые проблемы, подскажите чайнику, пожалуйста. У меня картинок много, стают в ряд, выходит несколько рядов и когда на среднюю например навожу мышь, то вся страница сдвигается и картинки тоже, к тому же крайние правые картинки почему то при наведении мыши открываются и сразу закрываются и снова открываются, карусель такая выходит. Подскажите как сделать?

23 Января 2015 в 22:43:02
24

Здравствуйте, Александр!

Трудно ответить на Ваш вопрос чем-то конкретным. Надо смотреть самому. Можете оставить ссылку на страницу с изображениями в комментариях или обратной связи. Если смогу помочь, то помогу.

Поделиться мнением!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Loginza

(обязательно)