Красивые эффекты для изображений при наведении курсора.

Приветствую всех у себя на блоге. Ох, как давно мы ничего не делали с изображениями. И поэтому сегодня предложу, как можно с помощью 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 код, как описано выше.

Хороших вам выходных. Спасибо, что заглянули в мои шпаргалки. Увидимся.

оформите подписку на новые шпаргалки

Введите Ваш email ...: