Как сделать Плавное увеличение картинки при наведении курсора?

Доброго здравия, всем кто зашёл на — Sozdaiblog.ru!

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

Вы узнаете, как это сделать и что для этого понадобиться.

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

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

Я ещё подумал – «Вот автору делать нечего, устроил тут минимализм!», но, после того, как я направил курсор мыши на первую миниатюру, случилось чудо.  Произошло плавное увеличение картинки.

Короче, мне этот эффект очень понравился и я захотел узнать, как сделать такое на своём блоге.

Просидев половину дня в Интернете, у меня получилось найти решение данной задачи, и я хочу поделиться ответом с Вами, дорогие мои читатели.

Как обычно, мы будем работать с самым распространённым движком в блогосфере — WordPress.

Если Вы не знаете, как установить WordPress на хостинг, то обязательно почитайте все статьи по этой теме.

Как сделать плавное увеличение картинки при наведении курсора мыши.

Для того, чтобы сделать плавное увеличение картинки Вам нужно скачать вот этот архив => imagesize.

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

Обычно, это делается с помощью ftp-клиента.

Если, Вы не умеете пользоваться ftp-клиентом, советую прочитать статью – «Как настроить ftp-клиент».

Пояснение:

Корневая папка – это та папка, в которой находятся все файлы нашего движка WordPress

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

Потратьте 2 минутки личного времени и получите необходимый пароль.

После подписки напишите мне на почту, и я его Вам вышлю!

• Адрес почты:  SOZDAIBLOG@yandex.ru.

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

Скорее всего, это будет какая-то статья. Тогда, Вам будет нужно найти в папке с темой оформления файл, отвечающий за вывод одиночных записей. Обычно это – single.php.

Открыть его и вставить вот такой скрипт:

<script type="text/javascript" src="/imagesize.js"></script>

Затем, во время написания очередной статьи, переключаетесь из визуального редактора в HTML-редактор и вставляете в текст любое изображение, при помощи следующего кода:

<div><img class="expando" alt="Как сделать Плавное увеличение картинки при наведении курсора?" src="Ссылка на изображение" width="150" height="110" border="0" /></div>

Вот Вам наглядный пример плавного увеличения картинки при наведении курсора мыши:

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

Скажите, а какие способы увеличения знаете Вы?

На сегодня это всё. Ожидайте новых эффектов.

С уважением, Денис Черников!