no se cual es la idea de panino (
), creo que es ponerle una capa traslucida encima de la imagen. lo habia pensado de otra forma. tener la imagen con transparencia en elemento con fondo oscuro y con alguna libreria opacar la imagen. en este caso use mootools
(effects) y modifique el demo que viene cuando descarga la libreria. asi me ha quedado,
index.htm
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="demo.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="demo.js"></script>
<title>Effects Introduction</title>
</head>
<body>
<p id="myElement" class="demoElement"><img src="http://climatelab.org/@api/deki/files/191/=Compact%20Fluorescent%20Light%20Bulb.jpg" /></p>
</body>
</html>
demo.css
Código:
p.demoElement {
border: 1px solid black;
background-color: #333;
font-size: 12px;
color: #000000;
padding: 10px;
}
p.demoElement img{
opacity:.3;
}
demo.js
Código:
window.addEvent('domready', function() {
var el = $('myElement').firstChild;
// MooTools is able to handle effects without the use of a wrapper,
// so you are able to do effects with just one easy line.
// Long version
el.addEvent('mouseover', function(e) {
// You often will need to stop propagation of the event
e.stop();
el.fade(1);
});
el.addEvent('mouseout', function(e) {
e.stop();
el.fade(0.3);
});
});
no me preguntes nada de mootools porque desconozco la libreria por completo.