Здравствуйте друзья. Возвращаюсь опять к картинкам, фото, одним словом к изображениям в наших постах. Сегодня расскажу, как с помощью небольшого кода 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;
Кто захочет таким способом увеличить изображения во всех постах блога, код CSS (без тэга style) вставьте в шаблон изменить шаблон выше строки ]]></b:skin>.
Протестировала в тестовых блогах увеличение размера изображений в боковых колонках, не очень понравилось. Изменился не в лучшую сторону размер гаджета статистики и вообще всех виджетов. Но если кому понадобится, измените в коде .post img { на .sidebar img{
На сегодня у меня вся информация. Будут вопросы, задавайте в комментариях. Всего доброго.
Предыдущий пост: Убрать с главной Оформить родные социальные кнопки Google.
Новый пост: Изменить изображение маркера в списке используя CSS;
