Приветствую всех у себя на блоге. Ох, как давно мы ничего не делали с изображениями. И поэтому сегодня предложу, как можно с помощью CSS сделать некоторые эффекты при наведении курсора на картинку.
Кто пропустил пост как сделать изображение круглой формы в блоге прошу перейти сюда. А также интересный эффект анимации картинки в этом сообщении.
В общую копилку добавим ещё некоторые варианты. Это легко реализовать в Блоггере. Заранее нужно определиться. Хотим выбранный эффект видеть всегда или предполагается использовать его в единичных случаях.
В каждом варианте используются определённые стили CSS и небольшой HTML код.
Эффект чёрно-белого изображения. Наводим курсор на картинку.
HTML код.
<div class="bw">
<img alt="мики" src=" адрес картинки" height="150" width="200" />
</div>
CSS
<style>.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}</style>
Эффект увеличения картинки.
HTML
<div class="grow pic">
<img src="адрес картинки" alt="поцелуй">
</div>
CSS
<style>.grow img {
height: 200px; / высота до наведения/
width: 200px;-webkit-transition: all 1s ease;/ширина до наведения/
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.grow img:hover {
width: 400px;/высота после наведения/
height: 400px;/ширина после наведения/
}</style>
Осветление картинки.
HTML
<div class="brighten pic">
<img src=" адрес изображения" >
</div>
CSS
<style> .brighten img {
-webkit-filter: brightness(0%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.brighten img:hover {
-webkit-filter: brightness(100%);
}</style>
Смена картинки.
HTML
<div class="img">
</div>
CSS
<style>.img {
background: url(" адрес изображения") no-repeat; / изображение по умолчанию /
height: 150px;
width: 150px;
}
.img:hover {
background: url(" адрес изображения") no-repeat; / новое изображение /
height: 150px;
width: 150px;
}
</style>
При однократном использовании просто перейти при написании сообщения в режим HTML и вставить в нужное место сначала готовый HTML код и под ним код стилей CSS. Результат будет виден только в режиме просмотр. В случае если часто использовать эффект, разумнее будет код стилей CSS установить в шаблоне блога перед строкой ]]></b:skin>. А при написании только вставлять HTML код, как описано выше.
Хороших вам выходных. Спасибо, что заглянули в мои шпаргалки. Увидимся.
Кто пропустил пост как сделать изображение круглой формы в блоге прошу перейти сюда. А также интересный эффект анимации картинки в этом сообщении.
В общую копилку добавим ещё некоторые варианты. Это легко реализовать в Блоггере. Заранее нужно определиться. Хотим выбранный эффект видеть всегда или предполагается использовать его в единичных случаях.
В каждом варианте используются определённые стили CSS и небольшой HTML код.
Эффект чёрно-белого изображения. Наводим курсор на картинку.

<div class="bw">
<img alt="мики" src=" адрес картинки" height="150" width="200" />
</div>
CSS
<style>.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}</style>
Эффект увеличения картинки.

HTML
<div class="grow pic">
<img src="адрес картинки" alt="поцелуй">
</div>
CSS
<style>.grow img {
height: 200px; / высота до наведения/
width: 200px;-webkit-transition: all 1s ease;/ширина до наведения/
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.grow img:hover {
width: 400px;/высота после наведения/
height: 400px;/ширина после наведения/
}</style>
Осветление картинки.

HTML
<div class="brighten pic">
<img src=" адрес изображения" >
</div>
CSS
<style> .brighten img {
-webkit-filter: brightness(0%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.brighten img:hover {
-webkit-filter: brightness(100%);
}</style>
Смена картинки.
<div class="img">
</div>
CSS
<style>.img {
background: url(" адрес изображения") no-repeat; / изображение по умолчанию /
height: 150px;
width: 150px;
}
.img:hover {
background: url(" адрес изображения") no-repeat; / новое изображение /
height: 150px;
width: 150px;
}
</style>
При однократном использовании просто перейти при написании сообщения в режим HTML и вставить в нужное место сначала готовый HTML код и под ним код стилей CSS. Результат будет виден только в режиме просмотр. В случае если часто использовать эффект, разумнее будет код стилей CSS установить в шаблоне блога перед строкой ]]></b:skin>. А при написании только вставлять HTML код, как описано выше.
Хороших вам выходных. Спасибо, что заглянули в мои шпаргалки. Увидимся.
оформите подписку на новые шпаргалки
Виктория, спасибо за красивые эффекты. Сам очень люблю css и html. Эффект с увеличением картинки смотрится очень хорошо.
ОтветитьУдалитьМаксим, рада видеть на своём блоге. Со сменой картинки мне тоже очень нравится. Я просто зависаю, когда играюсь с CSS.
УдалитьКак интересно! А мне понравилось с осветлением картинки, так загадочно, непонятно, что за картинка откроется)
ОтветитьУдалитьАня, это всего лишь маленькая часть что можно вытворять с помощью CSS. Ну, вот я бы даже не сомневалась, зная тебя немного, что именно это тебе понравится.
ОтветитьУдалитьДа, Вика, я уже просматривала эффекты, может быть когда-нибудь пригодятся, но это разовый вариант, а для изменения всех картинок мне сейчас нравиться твой код для ссылок "с побочным эффектом". Спасибо!
ОтветитьУдалитьСтатья отличная, но картинок я не вижу, хотя эффект проглядывается.
ОтветитьУдалитьДвух картинок нет.
ОтветитьУдалитьНаталья, а вы не обратили внимание, что с картинками некоторое время опять беда происходит. У меня то на главной не отображаются , то в рекомендованных сообщениях. Подожду некоторое время. В поиске эти картинки есть.
ОтветитьУдалить