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



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

В блоге я уже писала статьи о разных фишках с картинками, сходите при желании и почитайте: Изображения качающиеся, повороты и другие эффекты; и Как при наведении мыши получить эффект изображения круглой или овальной формы; Другие записи смотрите в меню содержание, ярлык "изображения"

Используя 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;
}

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

Почитайте другие статьи:

TEXT.RU - 100.00%


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *