[código] Efecto encendido y apagado en imágenes

Efecto de imagen que se apaga al pasar el ratón
Recuerda que sólo puede ponerse en aquellos lugares del foro donde puedan colocar HTML.

Haremos el mismo efecto que en el tutorial anterior, sólo que al contrario, las imágenes que definamos se verán normales pero al pasar el ratón por encima harán un efecto de apagado.

Vamos a:
Panel de administración > visualización > colores > css stylesheet
Y colocamos este código:
CÓDIGO:
.imagen-opaca:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.imagen-opaca img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}


Luego debes colocar este código para colocar la imagen que quieras que tenga este efecto, no en el css sino allá donde queramos poner nuestra imagen y que acepte código HTML:
CÓDIGO:
<span class="imagen-opaca"><img src="URL DE LA IMAGEN" border="0"></span>


Obviamente donde dice URL DE LA IMAGEN debes sustituirlo por la dirección de la imagen.

Hacer que las imágenes con este efecto sean un enlace:

Haríamos los mismos pasos pero los códigos serían así:
CÓDIGO:
a.imagen-opaca:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.imagen-opaca img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

CÓDIGO:
<a class="imagen-opaca" href="URL DE DESTINO"><img src="URL DE LA IMAGEN" border="0"></a>

En url de destino colocamos la dirección a donde nos lleva al hacer click sobre la imagen.

Si queremos que el enlace se abra en una página nueva lo pondremos así:
CÓDIGO:
<a class="imagen-opaca" href="URL DE DESTINO" target="_blank"><img src="URL DE LA IMAGEN"></a>


http://tutorialesasistencia.foroactivo.com/Efecto-encendido-y-apagado-en-imagenes-h7.htm

copryrigth foroactivo