Foros del Web - Ver Mensaje Individual - Variar progresivamente la opacidad del background

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>