» »

Закругление изображения с эффектом на CSS


Закругление изображения с эффектом на CSS

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

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

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

Код
img {
width: 200px;
height: 200px;
border-radius: 50%;
  }


Но мам нужно, чтоб было видно визуально, и безусловно, чтоб присутствовал при этом красивый эффект. И теперь с помощью псевдо класса hover, можно сделать, а точнее возврат картинки, которая по умолчанию идет.

Установка:

Простой код, в который ставим ссылку, но здесь вам нужно лучше сделать, чтоб гирина и высота совподала, но можно и разные.

HTML

Код
<img src='http://zornet.ru/Aben/SnmGi-173.jpg' />


Осталось поставить стили, это можно в CSS или ниже кода и заключаем в style, как показано ниже.

CSS

Код
<style>  
img {
width: 350px;
height: 350px;
border:1px solid #ddd;  
border-radius: 50%;
box-shadow: 0 2px 5px #aaa;
margin: 5% auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;  
  }
img:hover {
border-radius: 3px;
  }
</style>


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



Источник: Dbmast.ru
22.10.2016 Просмотров: 407 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
FeStemBer
FeStemBer 22.10.2016 21:331
0
Это можно сказать простые стили, что можно применить каждому, и точно на фотоальбом пойдет, так как основная ссылка где стоит, там все по стандартному, только стиль ставить и наслаждаться.)
Kosten
Kosten 22.10.2016 21:413
0
Встречался также сайт, где вид материалов поставили, не знаю, не очень понравилось, этот эффект, где то по другому нужно применять.
Сопрано
Сопрано 22.10.2016 21:362
0
Красиво получается, если кто заметил, там даже есть небольшая тень, но здесь все правильно, что ширина и длина - должна одинаково быть, то круг будет похоже на дыню. 11a
avatar