Opacidad Onmouseover

Ponemos una imagen, Le damos una opacidad. Al pasarle el ratón, la imagen pierde la opacidad y queda resaltada. La imagen, además, oculta una URL que nos dirige a donde queramos al picar sobre ella.

Muy guapo... y muy fácil de hacer.

Un ejemplo:

Colocamos en la sección CSS de la plantilla (antes del cierre /skin) este código:

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }

div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

En la entrada, o donde queramos ver nuestra imagen, colocamos esta otra pieza de código:

<div class="transON" style="width:100px;height:119px;" onmouseover="this.className='transOFF'" onmouseout="this.className='transON'" ><a href="http://www.mandarindesign.com/opacity.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuk5E2Ctk0C7dievh15CfNXy9gP0cqxUkH7rwmJLgjj7YaUjw_HJ5a4t_hvczxGUr1mP5lSJXVRag1b2j-AZFtYhRDyckHTzI1IVfjnEVfv49ZSICI-apsxA1mppXsX3Q96FIHyPBmNisG/s400/Alicia.gif" width="100" height="119" style="border:1px solid black;"></a></div>

Y listos... he dejado la URL original del ejemplo de Mandarín, para que quien quiera visitar la página sobre opacidad pueda llegar desde la imagen.