hover эффект для картинок при наведении курсора

Привет, друзья. Предлагаю вам код красивого hover эффекта для изображений в блоге. На самом деле всяких вариантом оформления картинок на странице очень много. Этот же позволит создать интересный эффект при наведении курсора на изображение. К тому же такой фокус - покус можно будет сделать как к одной картинке, так и автоматически для всех.

эффект для картинок
Всё абсолютно просто. Зададим цветную рамку и с помощью свойства shadow добавим тень. Я в тестовых примерах всегда делаю специально более контрастные цвета, чтобы было понятнее. Вы можете сделать нужные вам. И об этом ниже.
А теперь посмотрите на тестовом блоге как всё это будет выглядеть. Наведите курсор на любое изображение.


В спокойном положении картинка, а при наведении рамка с тенью. Тут должна заметить - лучше он смотрится если вы  убрали в шаблоне, заданную по умолчанию рамку вокруг изображений в блоге. Хотя, можно и с ней попробовать.

Код

.post img {
padding: 8px;
background: #ffffff;  /* основной фон */
border: 1px solid #cccccc; /* размер и цвет рамки */
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB; /* цвет при наведении */
border:1px solid #FF3300; /* цвет рамки при наведении */
-moz-box-shadow:0 0 10px 2px #FF0000;
-webkit-box-shadow:0 0 10px 4px #FF0000;
box-shadow:0 0 10px 4px #FF0000;
}


Комментариями в коде я отметила основные цвета. Поменяйте так же значения -moz-box-shadow: и webkit-box-shadow: на свои. Размеры внешней тени 5px; на желаемые.

Для применения такого эффекта ко всем изображениям, готовый код устанавливаем во вкладке Тема перед строкой ]]></b:skin>.  Если же решите его применять иногда, то просто заключите этот код в теги

<style>тут весь код <style>


Устанавливайте непосредственно в нужном месте сообщений, в режиме HTML.

Сложного ничего нет, и такой hover эффект сделает ваш блог более интересным.

Всем удачи, солнечных денёчков и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


2 комментария:

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск