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.