Прозрачность

Утилиты для управления CSS-свойством opacity.

Классы

Класс

opacity

op-0

0 (полностью прозрачный)

op-1

0.1

op-2

0.2

op-3

0.3

op-4

0.4

op-5

0.5 (полупрозрачный)

op-6

0.6

op-7

0.7

op-8

0.8

op-9

0.9

op-10

1.0 (полностью непрозрачный)

Hover-состояния

Класс

Эффект

hover:op-0

opacity: 0 при наведении

hover:op-1

opacity: 0.1 при наведении

…

…

hover:op-10

opacity: 1 при наведении

Примеры

<!-- Полупрозрачный оверлей -->
<div class="op-5 bg-black">Полупрозрачный фон</div>

<!-- Отключённый вид -->
<button class="op-4" disabled>Недоступна</button>

<!-- Эффект при наведении -->
<img class="op-10 hover:op-7" src="photo.jpg" alt="фото" />

<!-- Плавное появление -->
<div class="op-0 hover:op-10" style="transition: opacity 0.3s">
  Появляется при наведении
</div>