Здравствуйте дорогие блоггеры. Вернемся к изображениям в наших блогах. Для вебмастеров, кто захочет обратить внимание посетителя на свои фото или картинки, информация в этой статье.
В блоге я уже писала статьи о разных фишках с картинками, сходите при желании и почитайте: Изображения качающиеся, повороты и другие эффекты; и Как при наведении мыши получить эффект изображения круглой или овальной формы; Другие записи смотрите в меню содержание, ярлык "изображения"
Используя CSS, мы оформим картинки плавным изменением фона при наведении мышью, с оригинала на прозрачный и наоборот.
В блоге я уже писала статьи о разных фишках с картинками, сходите при желании и почитайте: Изображения качающиеся, повороты и другие эффекты; и Как при наведении мыши получить эффект изображения круглой или овальной формы; Другие записи смотрите в меню содержание, ярлык "изображения"
Используя CSS, мы оформим картинки плавным изменением фона при наведении мышью, с оригинала на прозрачный и наоборот.
Пример, наведите мышью
Заинтересовало, тогда вперед! CSS для изображений в статьях
.post-body img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:0.7;
}
Для всех картинок в блоге
.content img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.content img:hover {
opacity:0.7;
}
Эффект для картинок в сайдбаре
.sidebare img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.sidebare img:hover {
opacity:0.7;
}
Настройте прозрачность фона: opacity:0.7; и время эффекта изменяющего фона в секундах. Код CSS вставить шаблон изменить шаблон выше строки ]]></b:skin>. Делайте резервную копию или создайте тестовый блог на таком же шаблоне, что рабочий и поэкспериментируйте на нем.
Стиль картинок только для одной страницы, вставьте в редакторе по вкладке HTML
<style>.post-body img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:0.7;
}</style>
Можно вставить дизайн добавить гаджет для контента, сообщений и картинок в сайдбаре
<style>код CSS</style>
Обратный эффект, фон картинок будет прозрачный, при наведении мыши оригинал
.post-body img {
opacity:0.7;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:1.0;
}
На этом закончу, все вопросы, если будут, задавайте в комментариях или форма "контакты". Всего доброго.
Почитайте другие статьи:
