28 Фев Увеличение изображения при наведении мыши

Самый простой и эффективный способ создания увеличивающегося изображения при наведении мыши

Этот способ работает даже когда ваш блок находится внутри родительского блока со свойством [position: relative] которое не дает увеличиться изображению за границы родительского блока, изображение всплывает и позиционируется относительно окна браузера за счет применения [position: fixed], поэтому его можно растянуть до размера окна браузера.

Искал похожее решение, но не нашел, или может плохо искал :)

1. Определяем стили в таблице CSS:

.img1 img {
-webkit-transition: all 2s;
transition: all 2s;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition-timing-function: ease;
}

.img1:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
position: fixed;
top: 15%;
left: 22%;
background: #FFF;
z-index:10000;
}

2. Применяем к изображению на странице:

<img class="img1" src="http://..."> //путь к вашему изображению

Размер увеличения картинки можно менять, изменяя значения в свойствах:

-webkit-transform: scale(1.1);
-ms-transform: scale(1.1); 
 transform: scale(1.1);

Enjoy!