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

Привет, друзья. В своё время я писала пост, как сделать изображения в блоге круглой формы. Используя значение border-radius можно задать разную округлость у картинки. Сегодня, к тем же самым значениям, добавим ещё некоторые эффекты изменения картинки при наведении на неё курсора.
Примечательно то, что не нужно никаких jqeury и  javascript, для того чтобы сделать красивый эффект - всё работает при помощи CSS.

Ниже я привела всего 4 примера, чтобы вы могли просмотреть, как ведут себя изображения. Под каждым примером код, который вы можете копировать и устанавливать прямо в редакторе в режиме 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="https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A" />

Вариант 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="https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A" />

Вариант 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="https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A" />

Вариант 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="https://3.bp.blogspot.com/-8HBpQvcFyP0/U3pG2rNbRaI/AAAAAAAAEcM/-2EB2ldKnUY/s200/25042014657.jpg%0A" />

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

.izo и .izo:hover на .post-body img  и .post-body img:hover

И потом уже в сообщении прописать адрес картинки уже вот так - 

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

Будьте, пожалуйста, внимательны ко всем символам в кодах.

Если поэкспериментировать, добавить ещё CSS стили или удалить, можно получить вполне оригинальное оформление картинки при наведении на неё курсора.

Всем удачи и до встречи. Спасибо.

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

Введите Ваш email