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

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


5 комментариев:

  1. Виктория, спасибо за красивые эффекты. Сам очень люблю css и html. Эффект с увеличением картинки смотрится очень хорошо.

    ОтветитьУдалить
    Ответы
    1. Максим, рада видеть на своём блоге. Со сменой картинки мне тоже очень нравится. Я просто зависаю, когда играюсь с CSS.

      Удалить
  2. Как интересно! А мне понравилось с осветлением картинки, так загадочно, непонятно, что за картинка откроется)

    ОтветитьУдалить
  3. Аня, это всего лишь маленькая часть что можно вытворять с помощью CSS. Ну, вот я бы даже не сомневалась, зная тебя немного, что именно это тебе понравится.

    ОтветитьУдалить
  4. Да, Вика, я уже просматривала эффекты, может быть когда-нибудь пригодятся, но это разовый вариант, а для изменения всех картинок мне сейчас нравиться твой код для ссылок "с побочным эффектом". Спасибо!

    ОтветитьУдалить

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