(Premisa: quizás sea de tu interés también hacer "botones con esquinas redondeadas utilizando sólo css. Sigue el enlace al foro de css.)
EL EFECTO HOVER SOBRE IMÁGENES, CON CSS, claro.
Encontrado en
abeontech.com y que traduzco por libre:
"Con css todo lo que necesitas hacer es colocar unas líneas en tu hoja de estilo para lograr el efecto rollover sobre imágenes o texto.
No necesitas una segunda imagen o script.
Paso 1:
Coloca entre <head> y </head> el siguiente código:
Cita: <style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
Paso 2
Ahora añade la clase 'class="linkopaity" ' a el enlace que quiereas que tenga el rollover. Funciona con enlaces de texto e imágenes.:
Código HTML:
<a class="linkopacity" href="#" title="CSS-Rollover" ><img src="mi-imagen.jpg" alt="CSS tutorials"></a>
Aquí un ejemplo funcionando
Probado con FF 3.0.3, ie7, Opera 9.25
Un saludo
௫