Увеличение картинок при наведении курсора в статье блога без плагинов

Опубликовано: 05.09.2018

видео Увеличение картинок при наведении курсора в статье блога без плагинов

Плавное увеличение изображений

Приветствую вас, уважаемые посетители моего блога



Рад видеть вас снова. Решил в этой статье показать вам один достаточно простой и эффективный способ увеличения изображений при наведении курсора в своих статьях без помощи плагинов и объемных кодов.

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


Создание сайтов Как увеличить картинку в виджетах

Способы увеличения картинок в статьях веб-ресурса

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

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

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

Посмотрите на мой способ увеличения картинок при наведении курсора в действии. Подведите курсор к изображению, расположенному ниже и увидите как действует эта функция:

.

.

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

Как увеличить изображение при наведении курсора на своём веб-ресурсе

Предлагаю вам посмотреть и скачать специальный код для реализации функции увеличения изображения в статьях при наведении курсора на него:

onmouseover="this.style.width='auto'"onmouseout="this.style.width='100px'"

Скопируйте его и после вставки картинки в редакторе WordPress перейдите во вкладку текст (режим html) и вставьте его в это место:

<img class="aligncenter" src="http://saranchinsergey.ru/wp-content/uploads/2014/07/plyazh-mechtyi.png" alt=""ВСТАВЬТЕ КОД СЮДА/>

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

Вы можете изменять ширину картинки, которая показывается изначально. Для этого задайте в коде свои параметры ширины(в пикселях). У меня начальная картинка имеет ширину в 100 пикселей:

onmouseout="this.style.width='100px'"

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

Пользуясь случаем, предлагаю вам прочитать ещё одну полезную статью про то, как создать скриншот экрана монитора. Думаю, вам пригодится эта информация.

До новых встреч в моих новых статьях!

Успехов Вам и Удачи С Уважением,

Другие интересные статьи:

МИНИ-КНИГА ПО ЗАРАБОТКУ В ИНТЕРНЕТЕ:
КАК БЫСТРО ВЫУЧИТЬ АНГЛИЙСКИЙ:
rss