Foros del Web - Ver Mensaje Individual

Naahuel · #5 (**permalink**) 07/06/2011, 09:08

Para eso se me ocurre que tenés que usar las propiedades de CSS3 como la de "transition".
Ejemplo (probar en Chrome):

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
 
<style>
  div{
    opacity:0.5;
    -webkit-transition: opacity 0.5s linear;
   }
  div:hover{
    opacity:1;
  }
 
</style>
</head>
<body>
  <div><img src="http://www.google.com/images/logos/ps_logo2.png" /></div>
</body>
</html>

Claro que también podés hacerlo con jQuery, que sería compatible con todos los navegadores aunque pasás a depender de JavaScript y de una librería externa:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 
<script>
  $(function(){
    $('div').mouseover(function(){$(this).stop().animate({'opacity':'0.5'});});
    $('div').mouseout(function(){$(this).stop().animate({'opacity':'1'});});
  });
  </script>
</head>
<body>
  <div><img src="http://www.google.com/images/logos/ps_logo2.png" /></div>
</body>
</html>