Pasar de transparente a sólido

bensita · #1 (**permalink**) 06/06/2011, 14:45

Hola a todos,

Mi intención es colocar imagenes en divs, que estas tengan un 50% de transparencia, y al hacer over sobre ellas se vean sólidas.

Alguna ayuda?

Desde ya gracias !!!

#2 (**permalink**) 06/06/2011, 17:56

Pues es fácil de hacer sin un solo caracter de javascript, con CSS

Código CSS:

Ver original#midiv {
    opacity : 0.5;
}
 
#midiv:hover {
    opacity : 1;
}

Para IE se hace de otra forma, pero igualmente simple (busca sobre "filter" y "alpha")

Saludos.

_cronos2 · #3 (**permalink**) 06/06/2011, 23:22

Cita:

Iniciado por AlvaroG

Para IE se hace de otra forma, pero igualmente simple (busca sobre "filter" y "alpha")

Por fin a partir de IE9 aceptaron el estándar y se acepta opacity

Pero para los anteriores todavía hay que ir haciendo cosas diferentes >.<'
Saludos (:

bensita · #4 (**permalink**) 07/06/2011, 07:14

Muchas gracias !!!!
Será que existe una manera de hacerlo con efecto fade in/out ?

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>

bensita · #6 (**permalink**) 07/06/2011, 11:05

Muchas gracias, era lo que buscaba !!!!

Gracias a todos

Bensita

InKarC · #7 (**permalink**) 07/06/2011, 13:04

Ya se que soluciono su problema el usuario que pregunto; pero la mejor forma es esta ya que es solo CSS y es compatible con Firefox 2+, IE7+, y Chrome:

Código CSS:

Ver originaldiv{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
 
div:hover{
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}