Привет, друзья. Предлагаю вам код красивого hover эффекта для изображений в блоге. На самом деле всяких вариантом оформления картинок на странице очень много. Этот же позволит создать интересный эффект при наведении курсора на изображение. К тому же такой фокус - покус можно будет сделать как к одной картинке, так и автоматически для всех.
Всё абсолютно просто. Зададим цветную рамку и с помощью свойства shadow добавим тень. Я в тестовых примерах всегда делаю специально более контрастные цвета, чтобы было понятнее. Вы можете сделать нужные вам. И об этом ниже.
А теперь посмотрите на тестовом блоге как всё это будет выглядеть. Наведите курсор на любое изображение.
В спокойном положении картинка, а при наведении рамка с тенью. Тут должна заметить - лучше он смотрится если вы убрали в шаблоне, заданную по умолчанию рамку вокруг изображений в блоге. Хотя, можно и с ней попробовать.
Код
Комментариями в коде я отметила основные цвета. Поменяйте так же значения -moz-box-shadow: и webkit-box-shadow: на свои. Размеры внешней тени 5px; на желаемые.
Для применения такого эффекта ко всем изображениям, готовый код устанавливаем во вкладке Тема перед строкой ]]></b:skin>. Если же решите его применять иногда, то просто заключите этот код в теги
Устанавливайте непосредственно в нужном месте сообщений, в режиме HTML.
Сложного ничего нет, и такой hover эффект сделает ваш блог более интересным.
Всем удачи, солнечных денёчков и до встречи.
А теперь посмотрите на тестовом блоге как всё это будет выглядеть. Наведите курсор на любое изображение.
В спокойном положении картинка, а при наведении рамка с тенью. Тут должна заметить - лучше он смотрится если вы убрали в шаблоне, заданную по умолчанию рамку вокруг изображений в блоге. Хотя, можно и с ней попробовать.
Код
.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;
}
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 эффект сделает ваш блог более интересным.
Всем удачи, солнечных денёчков и до встречи.
Получайте новые сообщения с блога прямо на почту
Отличный эффект!
ОтветитьУдалитьСимпатично может получиться, если с цветом поиграться.
Удалить