Как при наведении мыши получить эффект изображения круглой или овальной формы



Здравствуйте гости, друзья и дорогие мои читатели. Много в блоге написала статей по работе с картинками. Совсем недавно написан пост изображения качающиеся, повороты и другие эффекты. Сама удивилась, как это я до сих пор не опубликовала информацию, как при наведении мыши сделать квадратную картинку круглой или овальной формы.

Наведите курсор мыши на картинку



<style>
.circle {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.circle:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
border-radius:150px;
}
</style>
<img class="circle" src="http://4.bp.blogspot.com/-LVwb0fJudyg/VWOBg56SE7I/AAAAAAAAI4U/9_IxZP-GNq0/s320/bgsgqezt.jpg"width="280"height="280"border="0" />


Все, что у меня выделено другим цветом, настраивайте как Вам надо. Коричневым-закругление картинки, больше или меньше; Синим-адрес изображения; Жирным зеленым-ширина и высота картинки;

Если удалить с кода выделенное сиреневым и увеличить высоту изображения, прямоугольная картинка при наведении мыши станет овальной без эффекта прокрутки. Чтобы сделать овал горизонтальным, установите ширину больше высоты. Ниже это скриншот.

При наведении мыши изображение овальной формы

<style>
.circle {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover{
border-radius:150px;
}
</style>
<img border="0" class="circle" height="380" src="http://4.bp.blogspot.com/-LVwb0fJudyg/VWOBg56SE7I/AAAAAAAAI4U/9_IxZP-GNq0/s320/bgsgqezt.jpg" width="280" />



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


При наведении эффект поворота на 25 градусов вправо и картинка овальной формы

<style>
.rotate:hover{
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
 -o-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
transform: rotate(-25deg);
border-radius:120px;
}
</style>
<img class="rotate" src="http://3.bp.blogspot.com/-vzn3NC9zk28/VWOR9_MkNWI/AAAAAAAAI5A/ZkVsEsgmcGk/s320/vgbdxhu2.jpg"width="280"
height="250"border="0" />




В этом коде -25 угол поворота вправо. Если установить +25, то поворот будет влево. Можно еще много настроить разных эффектов, почитайте пост по ссылке выше. В статье есть код увеличивающейся картинки при наведении. 

В стилях CSS .increase:hover добавьте значение border-radius:150px; "поиграйтесь" с размерами ширины и высоты. Тогда при наведении увеличивающаяся картинка будет круглой или овальной формы. Коды изображений вставляете дизайн-добавить гаджет в нужное место макета блога.

Еще хочу отметить, при установке разных эффектов поворотов картинок все работает корректно. Но если установить одну и ту же картинку с эффектом и без него, срабатывает только один на двух изображениях. На сегодня вся информация, будут вопросы, отвечу в комментариях. Всего доброго.

Возможно Вам будет интересно: Простые способы узнать адрес ссылки изображений; Делаем закругленные углы изображений;  Сервис создания коллажей изображений;




Автор статьи ✎ Olga Protasova Выпуск ✹ 5/26/2015 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *