CSS Image - Opacity / Transparency 효과

CSS를 이용하여 이미지에 마우스 오버 시 반투명효과를 적용할 수 있다

 

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

 

 

CSS를 이용하지 않고 직접 이미지에 효과를 넣어주는 방법

 

style="filter: alpha(opacity=100);opacity:1.0" onmouseover="this.style.filter='alpha(opacity=50)';this.style.opacity='0.5';" onmouseout="this.style.filter='alpha(opacity=100)';this.style.opacity='1.0';"