CSS: Кръгла снимка с ефект

[kreten]

Най мразя кат си мислят, че мога сичко. един пезевенг си иска муцуната кръгла аме ще да му я режа щото искал да си я сменя сяка година (сякаш по-красив ще става)

Как се прави кръгла картинка с opacity при hover.

Чех ама нещо не ми спори тая дивотия

http://bavotasan.com/2011/circular-images-with-css3/

изобщо не става кръгла тъпата мутра на тоз пезевенг

 

[kreten]

От: CSS: Кръгла снимка с ефект

тай туй го подкарах, само дето не мог ад аму дам хувъра щото е бекграунд да се е** в програмиста

 

[hatre]

От: CSS: Кръгла снимка с ефект

<img src="http://webdesignerwall.com/demo/css3-image-styles/images/image-3.jpg" style="border-radius: 51%;">

<img style="width: 500px; height: 500px; border-radius: 51%;" src="http://1.bp.blogspot.com/-Yp4aJSUZT0E/UVKutFgKSDI/AAAAAAAAEBs/YTSA410LHQ4/s1600/43316-nature-gorgeous-waterfall-wallpaper.jpg">

 

[hatre]

От: CSS: Кръгла снимка с ефект

Ховър:

<style>
#im:hover{ border-radius: 51%;}
</style>
<img id="im" src="http://webdesignerwall.com/demo/css3-image-styles/images/image-3.jpg" >

 

[bassta]

От: CSS: Кръгла снимка с ефект

codepen.io/burnandbass/pen/zwHjy

Направих ти пен, това ти е ефекта

 

[Вискяр Градинаров]

От: CSS: Кръгла снимка с ефект

Кръглото добре го правите. :|
Ама елипса?
Като е отворен тази тема, да видим има ли решение за елипса.

 

[kreten]

От: CSS: Кръгла снимка с ефект

<style>
#im{ border-radius: 51%;
* * * * *box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
#im img {
       margin-left: auto;
       margin-right: auto;
       padding-top: 10px;
}
#im:hover{ opacity: 0.5;
	filter: alpha(opacity=50);}
</style>
<center>
<img id="im" src="http://nakuchetovgaza.com/wp-content/uploads/analprobe.png" >
</center>

тоя ред оформя елипсата

padding-top: 10px;

 

[bassta]

От: CSS: Кръгла снимка с ефект

Супер лесно е... Просто оставяш border-radius на 50% и сменяш width/heigh:

codepen.io/burnandbass/pen/JFrGL