В этом обзоре вы увидите примеры css эффектов при наведении на изображение. Как подключить эффекты к blogger – в редакторе html кода найдите отрезок
]]></b:skin> и вставьте перед ним предложенный код. Для того, чтобы применить эффект к изображениям в блоге wordpress, нужно заменить в кодах .post-body img на img или на класс изображения, который вы можете узнать так и вставить полученный код в таблицу стилей (файл style.css).
Если вы не хотите, чтобы эффекты применялись ко всем изображениям записей блога, а лишь к выборочным картинкам, то добавьте класс, например, .effectCss. Тогда код, который будем добавлять в редакторе html примет вид
img.effekctCss {бла-бла-бла}
img:hover.effekctCss {бла-бла-бла}
а в сообщении (в режиме html) изображение, к которому будет применяться эффект, будем добавлять соответствующий класс:
<img class=”effekctCss” src=”url картинки">
Примеры css эффектов изображений при наведении вы можете просмотреть в этом видео. Далее в записи вы найдете соответствующие коды.
- Уменьшение непрозрачности при наведении курсора на изображение
.post-body img { opacity: 1; filter: alpha(opacity=100); }
.post-body img:hover { opacity: 0.3; filter: alpha(opacity=30); - Эффект появления тени при наведении курсора на картинку
.post-body img { border: 1px solid #eee; padding: 10px; } .post-body img:hover { -moz-box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px #ccc; }
- Перемещение изображения немного вверх
.post-body img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
margin-top: 2px;
} - Эффект, благодаря которому все изображения в сообщениях блога переводятся в серый цвет, а при наведении курсора они приобретают обычные цвета. Работает в Google Chrome.
.post-body img {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
filter: none;
-webkit-filter: grayscale(0%);
} - Увеличение изображения при наведении. Код css
.post-body img {
height: 300px;
width: 300px;
-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-body img:hover {
width: 400px;
height: 400px;
} - Обратный эффект – уменьшение картинки при наведении реализуется с помощью кода css:
.post-body img {height: 400px;
width: 400px;
-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-body img:hover {
width: 300px;
height: 300px;
} - Сдвиг изображений влево. Эффект можно использовать при создании галереи.
.post-body img { margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.post-body img:hover {
margin-left: -200px;
} - Поворот изображения при наведении
.post-body img { -moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.post-body img:hover {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
} - Вращение и скругление изображения:
.post-body img { -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} - Эффект размытия изображения хорошо работает в choogle chrome.
.post-body 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-body img:hover {
-webkit-filter: blur(5px);
}
Прикольно) А как можно сделать так, чтобы только в определенном сообщении был эффект?
Элси, вначале записи написано, как сделать, чтобы добавить выборочно эффекты к изображениям.
Напишу подробнее:
1. Выбираешь эффект из статьи и копируешь код в блокнот.
2. Заменяешь в коде .post-body img на img.effekctCss и .post-body img:hover на img:hover.effekctCss
3. Вставляешь полученный код в редактор шаблона перед кодом ]]>
4. Сохранить изменения.
5. Теперь при публикации сообщения, к коду изображения, к которому будет применяться эффект, нужно добавить class=”effekctCss”. Код изображения примет вид: <img class=”effekctCss” src=”url картинки">
Пиши, если будет непонятно!
Элси, а вот второй вариант, когда в редакторе шаблона, мы добавляем эффект к определенной странице блога. Нужно добавить код перед </head>
<b:if cond='data:blog.url == "http://адрес_вашей_страницы/"'>
<style>
код эффекта изображения (скопировать из статьи)
</style>
</b:if>
Извини, не внимательно прочла начало статьи) Спасибо за ответ, Наташа!
Элси, ничего страшного)
Я сама такая - читаю по диагонали.
Здравствуйте, а как сделать эффект, чтобы при наведении курсора на фото было перекрытие желтым цветом в 75 или 50% от истинного RGB?
Спасибо очень пригодилось)))
Спасибо за статью! Для WordPress к стати плагин есть чтобы подобные анимации делать. Вот видеообзор https://www.youtube.com/watch?v=Wtd2e5L47pc
а подскажите какой html код прописать на странице чтоб карнинки слегка затемнялись (или выделялись) при наведении курсора, я что только не перепробовал страница http://lamik59.narod.ru/index/laminat_platinum_power/0-40 у меня 2 редактора визуальный и HTML-кодов заранее спасибо
Попробуйте добавить img {
opacity: 0.8;}
img:hover {
opacity: 1;}