Контакты
  • evgenylebedevv@gmail.com
  • +7 960 255 15 53
  • L.E.V.rus
Сайт Веб-Студии Евгения Лебедева | Увеличение изображения
Самый простой и эффективный способ создания увеличивающегося изображения при наведении мыши
увеличивающегося изображения при наведении мыши
15952
post-template-default,single,single-post,postid-15952,single-format-video,ajax_fade,page_not_loaded,,side_area_uncovered_from_content,columns-4,qode-theme-ver-10.1.1,wpb-js-composer js-comp-ver-4.12,vc_responsive

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

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

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

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

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

 

<style type=»text/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;
}

</style>

Применяем к изображению:

<img class=»img1″ src=»http://…»>

Поделись, если оказалось полезно :)
Нет Комментариев

Написать комментарий