Прозрачность в CSS на примере

Сделать элемент полупрозрачным на сайте при помощи CSS можно несколькими способами. Разберем самый распространенный.

Opacity

Прозрачность задается свойством opacity: 0.5, где 0 - полностью прозрачное, а 1 - не прозрачный. Шаг значений в 0.1

Допустим, у нас есть вот такая картинка:

Давайте ей зададим ей полупрозрачность в 50%. За картинкой размещу красный блок, чтобы было видно работу прозрачности.

img {opacity: 0.5;}

Наведите мышку на картинку и увидите как она становится снова не прозрачной, т.е. получает свойство opacity: 1;.

В данном случае мне пришлось взять картинку в контейнер:

.primer-opacity-1 {background: red;}
.primer-opacity-1 img {opacity: 0.5;}
.primer-opacity-1 img:hover {opacity: 1;}