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

Вариант 2.

Вариант 3.

Вариант 4.

Примечательно то, что не нужно никаких 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" />
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" />
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" />
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" />
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 стили или удалить, можно получить вполне оригинальное оформление картинки при наведении на неё курсора.
здесь можно оформить подписку на новые шпаргалки
Виктория, ты всегда такие смешные картинки находишь! Сфотографировала дома игрушечного цыпленка? Я не люблю круглые или овальные картинки. У меня на них фобия (смотри Блог Кота Васьки).
ОтветитьУдалитьБыло дело с цыплёнком на прошлую пасху. А с картинками дело вкуса. тут главное понять как это делается, а реализовывать или нет каждый решает сам.
УдалитьЗдравствуйте, Виктория!!! Спасибо Вам за интересные "красивости" для блогов!!! Некоторые забрала себе, очень понравились!!!
ОтветитьУдалитьЛюдмила, спасибо и Вам за отзыв. Всегда приятно слышать, что пригодились шпаргалки кому-то.
Удалить