Увеличить изображения на страницах сообщений при наведении используя CSS



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

Ранее я уже писала информацию о разных эффектах с картинками, при желании посмотрите в статьях: Изменить размер изображения прокруткой колесика мыши и Увеличить изображение при клике мышью. Также есть другие посты по теме в "содержании" блога, ярлык "Изображения".

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

Увеличить размер изображений при наведении используя CSS

Сходите посмотреть пример в демо блоге.

Загружаете в редакторе блоггер картинки или фото, настройте размер (маленький, средний, крупный), переходите по вкладке HTML и внизу страницы вставьте код CSS.

<style>.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height: 100%;
}</style>

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

<style>.post img {
height: 50%;
width: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height: 100%;
}</style>

Настройки: выделено фиолетовым размеры картинок, голубым размер увеличения при наведении.

Кто захочет таким способом увеличить изображения во всех постах блога, код CSS (без тэга style) вставьте в шаблон изменить шаблон выше строки ]]></b:skin>.

Протестировала в тестовых блогах увеличение размера изображений в боковых колонках, не очень понравилось. Изменился не в лучшую сторону размер гаджета статистики и вообще всех виджетов. Но если кому понадобится, измените в коде .post img { на .sidebar img{

На сегодня у меня вся информация. Будут вопросы, задавайте в комментариях. Всего доброго.

Предыдущий пост: Убрать с главной Оформить родные социальные кнопки Google.
Новый пост:     Изменить изображение маркера в списке используя CSS;

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 4/21/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *