CSS: Opacity hover effect

[ssparikshya]

hi folks , today i gonna show you a effect of css3 which is called opacity

ok lets learn it


ok to work with css first we need to assign a class or division to it so, lets do it now for example

PHP Code:

<p class="test"> this is a test </p> 


ok now lets target it with css3 ,

to do it type the following code

PHP Code:

#test:hoveropacity:0.5; 


now #test here = your class that you assigned
now opacity in css is described in decimals of 1

for example 0.7 = 70%

now css3 does not work in IE 9 or lower

to fix that

type in following to the end..

PHP Code:

filter: alpha(opacity=50);
/* for IE 9 or lower only*/ 


now when you hover the mouse over the paragraph , it will reduce the opacity to 50 %


hope this helped you