Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Efecto opacidad en las imágenes con CSS


efecto opacidad



Tal efecto de opacidad queda la mar de bien tanto en las entradas del blog, como en la columna lateral del blog, procuraremos, añadir en una imagen el efecto opacidad que con ello lograremos que al pasar el cursor por encima de la imagen opaca, vuelva a su estado original, es decir a su disposición inicial de colorido. A continuación podrás ver una demostración del truco que os presento en está entrada.





Ahora para añadir este efecto opaco en tus imágenes lo debes de añadir en Blogger por ejemplo, de la siguiente manera que os desvelo a continuación es muy fácil, ya verás que es muy sencillo!      


  1. En Blogger sería de está forma:
  2. Ves a Blogger
  3. Y añade el siguiente código CSS antes de ]]></b:skin>
  4. Y luego el Html de la imagen, en una entrada o en Diseño Añadir un Gadget
  5. Y elige la opción Html y Javascript
  6. Copia y pega el código Html y por último, guarda el gadget.


Vayamos ahora a añadir los estilos CSS en tu blog!

/* Efecto opacidad en la imágenes en Aizum Blog */
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

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


Por último insertamos el Html dónde desees que se vea!

<a class="opacity" href="Enlace_de_la_imagen"><img src="Aquí_URL_De_Imagen" /></a>


Aizum Blog, domingo, diciembre 29, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9