# Opacity (presencia visual)
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/docs/opacity.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Utilidades · Transparencia
Controla la transparencia del elemento completo en once niveles, aplícala sólo durante hover o incorpora una transición de opacidad preconfigurada.
v2.0
11
## Once niveles
La escala avanza de 0% a 100% visible mediante incrementos constantes de diez puntos.
3
## Tres familias
Valor fijo, preset con transición y cambio exclusivo durante `:hover`.
1
## Una capa
La propiedad se calcula sobre el elemento completo, incluidos contenido, bordes y descendientes.
i
## Transparente no significa oculto
`.opacity-0` hace invisible el elemento, pero mantiene su espacio y puede seguir recibiendo interacción. Para retirarlo del layout utiliza una utilidad de display o visibility adecuada.
Código + resultado
## Compara las tres formas de aplicarla
El HTML mostrado es el mismo que produce cada resultado aplicado.
HTML
```html
Contenido al 50%
```
Resultado aplicado 50% visible
Contenido Texto, fondo y borde
`.opacity-50` aplica `opacity: 0.5` permanentemente a la caja completa.
HTML
```html
Superficie
Texto siempre opaco
```
Resultado aplicado Sólo la superficie cambia
Superficie
Texto siempre opaco Pasa el cursor sobre el recuadro
Las clases se aplican únicamente a la superficie: transiciona de 100% a 40%, mientras el texto hermano permanece completamente opaco.
HTML
```html
Superficie
Texto siempre opaco
```
Resultado aplicado 40% → 100%
Superficie
Texto siempre opaco Pasa el cursor sobre el recuadro
`.opacity-trans-40` inicia la superficie al 40% y prepara la transición; `.opacity-hover-100` la lleva al 100% sin modificar el texto.
Escala
## De invisible a completamente opaco
El número representa el porcentaje visible. El valor CSS equivalente va de `0` a `1`.
`.opacity-0` 0% visible
`.opacity-10` 10% visible
`.opacity-20` 20% visible
`.opacity-30` 30% visible
`.opacity-40` 40% visible
`.opacity-50` 50% visible
`.opacity-60` 60% visible
`.opacity-70` 70% visible
`.opacity-80` 80% visible
`.opacity-90` 90% visible
`.opacity-100` 100% visible
Mapa del sistema
## Una escala, tres momentos de aplicación
Las tres familias comparten los valores 0, 10, 20…100, pero difieren en cuándo aplican la opacidad y si agregan movimiento.
BASE `.opacity-{valor}`
### Estado permanente
Aplica el nivel inmediatamente y lo mantiene mientras la clase permanezca en el elemento.
`opacity: valor`
PRESET `.opacity-trans-{valor}`
### Valor con transición
Aplica el nivel y prepara cualquier cambio posterior de opacidad durante 250ms con easing suave.
`opacity + transition`
ESTADO `.opacity-hover-{valor}`
### Sólo al pasar el cursor
No cambia el estado normal; aplica el nivel únicamente mientras el elemento coincide con `:hover`.
`:hover { opacity }`
Sin variantes responsive Este módulo no define clases con breakpoint. No uses nombres como `.opacity-768-50`: actualmente no existen en el framework.
Alcance real
## Qué cambia y qué permanece
Comprender el comportamiento de la propiedad evita usar opacidad como reemplazo de display, visibility o colores transparentes.
◫
### Afecta toda la caja
Fondo, borde, texto, imágenes y descendientes se componen juntos con el mismo nivel.
↔
### Conserva el espacio
La caja sigue participando normalmente en el layout incluso cuando utiliza `.opacity-0`.
⌁
### Conserva interacción
Un elemento transparente puede seguir recibiendo clics y foco si no desactivas esas capacidades.
Aa
### Reduce contraste
En textos y controles, comprueba que el resultado conserve contraste suficiente sobre el fondo real.
Referencia
## Clases disponibles
La tabla distingue el valor visible de la familia que decide cuándo se aplica.
| Clases | Propiedad | Función | Uso |
| --- | --- | --- | --- |
| .opacity-0 | opacity: 0 | Mantiene el elemento al 0% visible. | Estado base permanente. |
| .opacity-10 | opacity: 0.1 | Mantiene el elemento al 10% visible. | Estado base permanente. |
| .opacity-20 | opacity: 0.2 | Mantiene el elemento al 20% visible. | Estado base permanente. |
| .opacity-30 | opacity: 0.3 | Mantiene el elemento al 30% visible. | Estado base permanente. |
| .opacity-40 | opacity: 0.4 | Mantiene el elemento al 40% visible. | Estado base permanente. |
| .opacity-50 | opacity: 0.5 | Mantiene el elemento al 50% visible. | Estado base permanente. |
| .opacity-60 | opacity: 0.6 | Mantiene el elemento al 60% visible. | Estado base permanente. |
| .opacity-70 | opacity: 0.7 | Mantiene el elemento al 70% visible. | Estado base permanente. |
| .opacity-80 | opacity: 0.8 | Mantiene el elemento al 80% visible. | Estado base permanente. |
| .opacity-90 | opacity: 0.9 | Mantiene el elemento al 90% visible. | Estado base permanente. |
| .opacity-100 | opacity: 1 | Mantiene el elemento al 100% visible. | Estado base permanente. |
| .opacity-trans-{0…100} | opacity + transition | Aplica el nivel indicado y anima los cambios de opacidad durante 250ms. | .opacity-trans-80 |
| .opacity-hover-{0…100} | opacity en :hover | Aplica el nivel indicado solamente mientras el puntero está encima. | .opacity-hover-60 |
Recomendaciones
## Buenas prácticas de opacity
01
### No ocultes interacción
Si utilizas `.opacity-0`, controla también foco y eventos cuando el elemento no deba operar.
02
### Cuida el contraste
Evita valores bajos en contenido esencial, etiquetas de formularios y acciones principales.
03
### Prefiere composición
Combina un estado base y hover cuando necesites definir claramente ambos extremos del cambio.
04
### No anides opacidades
Dos ancestros semitransparentes multiplican el efecto y pueden volver impredecible el resultado.