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

Автор:
Nurlan Kemelbekov
Во многих веб-сайтах, которые занимаются продажей товаров/продуктов, мы можем заметить, что они реализовали функцию изменения размера изображения при клике или простого наведения курсора мышки на нее. Они делают это для того, чтобы показать хороший надлежащий вид продукта, который они хотят продать.

Так, если клиент получит подробный вид продукта, есть шанс, что они купят этот продукт. Следовательно, они могут увеличить объем продаж продукции.

На одном из форумов был задан вопрос, есть ли способ плавного увеличения изображения при наведении курсора мышки на нее.
Это позволяет иметь картинку на веб-странице, и, когда кто то наводит курсор мыши на это изображение, увеличивается размер образа. Мне и самому стало интересно и я начал поиски решения данного вопроса, потому что это отличный способ сделать WordPress сайт более интерактивным.

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

<script type="text/javascript">
var gi,gd,gj=1,gn=20,gt=20,gs,swd,sht,lwd,lht;function sli(ii,wd1,ht1,wd2,ht2,s){gi=ii;gd=1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function ssi(ii,wd1,ht1,wd2,ht2,s){gd=-1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function xy(x1,x2,gj){return (x2-x1)*gj/gn+x1;}function rs(){var w=Math.round(xy(swd,lwd,gj));
var h=Math.round(xy(sht,lht,gj));
if(gs)gi.style.left=(swd-w)+"px";
gi.style.width=w+"px";gi.style.height=h+"px";if(gd>0 && gn>gj){gj++;setTimeout('rs()',gt);}else if(0>gd && gj>0){gj--;setTimeout('rs()',gt);}}
function imx(n){
var f;
for(var i=0;i< 5;i++){
f=document.getElementById('imx'+i);
if(f)f.className=(i==n)?"imxs":"";
f=document.getElementById('im'+i);
if(f)f.style.display=(i==n)?"":"none";
}
}
</script>

HTML:

<img onmouseover="sli(this,312,200,550,250,0)" onmouseout="ssi(this,312,200,550,250,0)" title="" alt="" src="" width="312" height="200" />

(this, 312,200,550,250,0) представляет ширину и высоту изображения. Первые две цифры — размер эскизов, вторые два — увеличенный размер. Маленькие размеры этого изображения должны быть включены в . Иначе увеличенная версия появится по умолчанию.

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

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

1) Скопировать весь код в блокнот (notepad)
2) Сохранить как, например, hover.php. При сохранении выбрать тип файла «Все файлы».
3) Загрузить hover.php в директорию темы сайта (/wp-content/themes/активная тема сайта/).
4) В файле footer.php темы сайта, перед закрывающим тегом body вставить:
<?php include_once(«hover.php») ?>

Вы можете посмотреть работу этого скрипта на этой странице, где расположено несколько изображений и все они могут плавно изменять исходный размер.

Создание простого CSS3 увеличения по наведению мыши

Выше Вы узнали о том, как можно плавно увеличить изображение с применением JavaScript, теперь это можно легко сделать с помощью CSS3. К сожалению, этот эффект работает только в Chrome, Safari и FireFox.

скриншот

HTML:

<a href="#">
<img src="путь-к-image.jpg" alt="">
</a>

CSS:

img{
    display: block;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
}
img:hover {
    opacity: .9;
    -webkit-transform: scale(1.11,1.17);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1.11,1.17);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
}
В нормальном состоянии, мы устанавливаем масштаб блока до 100%. В состоянии наведения настроены на 111% и 117%. Обратите внимание, что Вы можете установить функцию времени и продолжительности эффекта перехода по наведению мыши, изменив цифру 550ms, а также поиграть с процентами масштабирования.

Рабочее демо можно увидеть на этой же странице  чуть выше.

Третий вариант увеличения изображения при наведении курсора

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

Разметка
В HTML разметку на этот раз мы собираемся добавить класс zoom (для эффекта масштабирования) наряду с классом IMG для укладки наших изображений.

<div class="zoom img"><img alt="" src="/image_zoom.jpg" /></div>
Адаптивный дизайн
В этом эффекте масштабирования, мы укажем базовую ширину и высоту 200px х 200px и, чтобы реализовать эффекты плавного перехода зададим ему 2-секунды, добавив 100px по ширине и высоте, создавая иллюзию масштабирования.
.zoom img {
width: 200px;
height: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.zoom img:hover {
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}
CSS3 эффекты позволяют элементу постепенно изменяться от одного стиля к другому. Это очень полезно, когда нужно создать простой плавный эффект увеличения изображения.



Вам также может понравиться:


32 комментарий на “Простой способ плавного увеличения изображения при наведении курсора

  1. Здравствуйте, попробовал применить ваш первый способ в WordPress и ничего не вышло 🙁 Пробовал на сайте и на локальном сервере. Отображается маленькое изображение с размерами width и height. Может я что-то упускаю из виду?

    • Здравствуйте, Илья. Если Вы сделали все так, как написано в статье, должно получиться. Я не могу Вам написать здесь, что Вы могли упустить из виду. Пожалуйста, прочитайте еще раз четыре пункта, которые необходимо сделать, чтобы это работало.

  2. Спасибо за ответ…Мне бы хотелось добиться такого эффекта как на домспорт.рф, где так же представлена витрина и при наведении мышью появлялась более крупная картинка, домспорт.рф сделан на Друпал 6 с помощью модулей. А вот, что касается WordPress, здесь у меня вопрос…Хотелось бы помощи

    • Так это совсем не то, о чем я подумал, прочитав Ваш предыдущий комментарий. С Ваших слов я подумал, что Вы хотите добиться того, чтобы при наведении на одно изображение увеличивались и все картинки, находящиеся рядом. Пожалуйста, покажите свой сайт, чтобы посмотреть и посоветовать что-то. Но это, как я уже писал выше, сделать в режиме короткого комментария сделать сложно. Давайте попробуем.

  3. Добрый день! Имеется интернет-магазин на WP Shop, как можно применить вариант 1 вый ко всем изображениям в витрине магазина? Чтобы посетитель мог при наведении мыши посмотреть ближе товар в ряду с остальными. Заранее благодарю.

    • Здравствуйте, Наталья. Не уверен, что это хорошая идея, чтобы увеличить все изображения сразу, находящиеся на одной странице.
      Вы могли бы просто построить в один ряд изображения товаров поменьше и при наведении на каждую отдельно рядом появлялась увеличенная версия. А при наведении уже на увеличенную версию можно было просматривать отдельные части еще более ближе. Но это уже другой вариант и отличается от версии, показанной здесь в 1-ом варианте. И показать это в рамках данного комментария сложно.

  4. Добрый день! Спасибо за описание, вроде все подробно написали и понятно.
    Вопрос, а если хочется эффект при наведении мыши на картинку, чтобы изображение увеличивалось НО не менялся его размер, т.е. width, height не меняются.
    Как это реализовать?

  5. У вас дата отклеилась. Переверстайте или хотя бы костыль в виде margin-top: -8px; вставьте.

  6. Большое человеческое спасибо за ваш труд! Очень помогло

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

три × три =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!