Tema: FAQ's de CSS
Ver Mensaje Individual
  #72 (permalink)  
Antiguo 11/10/2008, 16:40
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 1 mes
Puntos: 539
Respuesta: FAQ's de CSS

(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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/10/2008 a las 10:20 Razón: enlazar los 2 efectos, rollover y esquinas redondeadas