Hola amigos desarrolladores hoy vamos a hablar de la propiedad opacity, y transparencia en CSS, haremos unos pequeños ejemplos en los cuales te serán muy fácil guiarte para lograr crear tus propios estilos personalizados.
Dependiendo de lo que quieras hacer o como quieres que se vean tus imágenes, podemos empezar a trabajar de esta manera.
La propiedad opacity o transparencia en CSS puede tomar un valor de 0.0 - 1.0. El valor más bajo, siempre será el mas transparente.
Se han visto casos en que en muchas situaciones, y eso lo dice el propio w3schools que en IE8 y uso anterior filter:alpha(opacity=x). La x puede tomar un valor de 0 a 100. Un valor inferior hace que el elemento sea más transparente.
imagen {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
En este caso tenemos que definir una clase para nuestra imagen, para esto tendremos que hacer lo siguiente :
img.hola {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img,hola:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Donde la palabra hola viene a ser la clase que hemos puesto dentro de nuestra imagen de la siguiente manera.
<img class="hola" src="tuimagen.jpg" />
Tu también puedes jugar con muchas formas para poder utilizar la propiedad opacity de CSS, o también conocido como la propiedad transparencia de CSS, espero que te haya gustado mucho este pequeño tutorial.
Si tienes alguna otra duda por favor escribenos para obtener una mayor información, en nuestra bandeja de comentarios o también vía e-mail.
Conociendo la propiedad opacity transparencia en CSS
Dependiendo de lo que quieras hacer o como quieres que se vean tus imágenes, podemos empezar a trabajar de esta manera.
La propiedad opacity o transparencia en CSS puede tomar un valor de 0.0 - 1.0. El valor más bajo, siempre será el mas transparente.
imagen {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Como crear el efecto de desplazamiento transparente con Hover y Opacity
Cuando se trata de diseñar, pues se inventan otro tipo de métodos con elementos que sean necesarios para maquillar un poco la situación dependiendo de que tan exigente sean tus diseños. Bien en este caso utilizaremos el elemento hover para hacer un pequeño efecto con el elemento opacity.En este caso tenemos que definir una clase para nuestra imagen, para esto tendremos que hacer lo siguiente :
img.hola {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img,hola:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Donde la palabra hola viene a ser la clase que hemos puesto dentro de nuestra imagen de la siguiente manera.
<img class="hola" src="tuimagen.jpg" />
Tu también puedes jugar con muchas formas para poder utilizar la propiedad opacity de CSS, o también conocido como la propiedad transparencia de CSS, espero que te haya gustado mucho este pequeño tutorial.
Si tienes alguna otra duda por favor escribenos para obtener una mayor información, en nuestra bandeja de comentarios o también vía e-mail.
0 comentarios: