Открыть меню

Увеличение картинки при наведении курсора.

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

Увеличение картинки при наведении курсораКартинки играют очень важную роль на блоге, во — первых они украшают блог.
Украшают статью, в которую они поставлены если эта картинка подходит по смыслу статье, то она может участвовать в поиске по картинкам в каждой поисковой системе есть поиск по картинкам и если картинка на блоге оптимизирована.
В каждой статье должна быть ключевая фраза основной запрос, подобранный в яндекс вордстат.
увеличение картинки при наведении курсора
Если картинка оптимизирована в статье блога в свойствах указаны ключевые фразы, соответствующие статье, то картинка может участвовать в поиске по картинкам.
Сегодня покажу как поставить скрипт увеличения картинок и при подведении курсора картинка будет увеличиваться…
Для того чтобы поставить скрипт увеличения картинок заходим в админ панель Blogger где автор блога может выполнить все настройки и нажимаем вкладку ДИЗАЙН.
 На нижней панели блога в футере нажимаю вкладку ДОБАВИТЬ ГАДЖЕТ.

Выбираем HTML/JavaScript в название ничего не пишем, а содержание вставляем скрипт.

 

<style>.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;
padding: 8px;
background: #ffffff;
border: 1px solid #d0d0d0;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
background: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
text-shadow: none;
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);

}</style>

 

 

Нажимаем СОХРАНИТЬ.
СОХРАНИТЬ РАСПОЛОЖЕНИЕ.
ПОСМОТРЕТЬ БЛОГ.
Сейчас подводя курсор к картинке,она немного увеличивается.
lypa
Увеличивается совсем немного как будто она живая, то есть приобретает определенное движение, но тем не менее это увеличение не мешает читать основной текст статьи.

Хочу получать новые статьи на E-mail

0

Автор публикации

не в сети 1 день

Алексей

0
Комментарии: 1Публикации: 63Регистрация: 13-11-2016

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

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

© 2019 Zarabotainadomy.ru · Копирование материалов сайта без разрешения запрещено
Дизайн и поддержка: GoodwinPress.ru