Ефект на промяна на изображението при задържане на курсора

Здравейте, приятели. Преди време написах публикация за това, как да променим формата на изображения в блога си. Как да им придадем кръгла форма чрез използването на значението border-radius. Това значение може да бъде настроено така, че да придаде различна закръгленост на изображението.

1. Какво представлява този ефект
2. Вариант 1
3. Вариант 2
4. Вариант 3
5. Вариант 4
6. Инсталиране

Днес, към това значение ще добавим още малко ефекти и изображението ни ще се променя, когато задържим курсора върху него.

Какво представлява този ефект

Трябва да отбележа, че не се нуждаем от jqeury и JavaScript, за да направим този красив ефект. Всичко работи с помощта на CSS.
Давам ви няколко примера, от които можете да видите поведението на изображението. Под всеки пример има код, който можете да копирате и инсталирате директно в редактора на публикацията си в HTML режим. А в края на публикацията има в допълнение как да
използвате това за всички ваши изображения в блога, ако желаете често да използвате тези ефекти.

Вариант 1

<style>.izo{
border-radius: 45% / 20%; /* Закръгляне на ъглите */
box-shadow: 0px 0px 15px #000; /* Сянка */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.izo:hover {
border-radius: 0; /* Премахване на закръглянето */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>

<img class=" izo" src="адрес на изображението" />

Вариант 2

<style>.izo1 {
box-shadow: 0px 0px 15px #000; /* Сянка */
border-radius: 50%; /* Закръгляне на ъглите */
border:0;
padding:0;

-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.izo1:hover {
box-shadow: 0; /* Премахване на сянката */
border-radius: 0; /* Без граници на закръглянето */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>

<img class=" izo1" src="адрес на изображението" />

Вариант 3

<style>.izo2 {
background:#FFF; /* Цвят на фона около изображение */
padding:15px; /* Растояние между рамка и изображение */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.izo2:hover {
box-shadow: 0px 0px 15px #000; /* Сянка */
border-radius: 0% 50%; /* Закръгляне на границите */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
</style>

<img class=" izo2" src="адрес на изображението" />

Вариант 4

<style>.izo3 {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.izo3:hover {
box-shadow: 0px 0px 15px #000;
border-radius: 50%;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>

<img class=" izo3" src="адрес на изображението" />

Инсталиране

Както ви казах при често използване на който и да е от тези ефекти по- разумно е да впишете избрания код непосредствено в шаблона на блога пред реда  ]]></b:skin>.  При това е нужно задължително да замените всички значения

.izo и .izo:hover с .post-body img и .post-body img:hover

И после в публикацията напишете адреса на изображението така:

<img class="rounded" src="Image URL"/>

Моля, бъдете внимателни с всички символи в кода.

Успех на всички и доскоро!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: