Variar progresivamente la opacidad del background

super_rayo · #1 (**permalink**) 31/01/2012, 14:36

¿Cómo puedo variar la opacidad del background (de un div por ej) de forma progresiva al pasar el ratón?

Si hago esto varia la opacidad de todo el contenido y yo solo quiero el background:

Código CSS:

Ver original.example{
    background: url() !important;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: opacity 0.3s linear;
}
.example:hover{
    background: url(ii_back.png) !important;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.5s linear;
}

Alguna idea? Gracias

kseso? · #2 (**permalink**) 31/01/2012, 14:53

Se me ocurren 2 vías.

Si es color (o gradiente css) defina sus valores en rgba.

Si es imagen, utilìcela como fondo del pseudoelemento ::before o ::after, posicionado absoluto y en top-left-bottom-right en 0 con z-index de ser necesario y aplicando el cambio de opacity al :hover del elemento.

super_rayo · #3 (**permalink**) 01/02/2012, 09:23

mm He estado probando y no consigo que aparezca la imagen. ¿Podrías ponerme un ejemplo? Gracias

kseso? · #4 (**permalink**) 01/02/2012, 15:34

Algo como esto:

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: none; position: relative;}
.caja {
  width: 660px;
  height: 400px;
  margin: 20px auto;
}
.caja::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(http://energiasrenovadas.com/wp-content/2011/01/el-coche-mas-vendido-en-Japon-es-un-hibrido.jpg);
  opacity: .4;
}
.caja:hover::after {opacity: .1}
 </style>
</head>
<body>
<div class="caja">
<h1>HOLA MUNDO</h1>
<p>Lorem ipsum dolor sit amet consectetuer Nulla In et accumsan Nam. Pretium eu eu sagittis nibh leo vel Vestibulum nibh ut Curabitur. Odio mauris semper elit Sed risus vitae eget urna dui quam. Pellentesque sem urna amet amet consectetuer elit ut eu egestas Ut. Velit sagittis mus Mauris Nulla nibh nisl Aenean Aenean leo odio. Tellus tincidunt odio a urna porttitor dolor Nam wisi Sed dignissim. </p>
</div>
</body>
</html>