• Options
• Login
• Register
• Search Study Materials
• Vidyarthiplus Shop

CSS: Opacity hover effect

• Index

  • Vidyarthiplus (V+) - Indian Students Online Education Forum
  • Other
  • Programming / Coding
  • CSS: Opacity hover effect
• CSS: Opacity hover effect

• CSS: Opacity hover effect

  ssparikshya > 11-12-2012, 01:28 PM

  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
• Next Oldest Next Newest