Здравствуйте, сегодня хотелось бы рассказать вам про интересный эффект активной прозрачности фоновой картинки, который создается с помощью использования псевдо-элемента before.
 
Давайте разберем вот такой пример:

Скачать исходники для статьи можно ниже

 
Как он работает?

Пока курсор мыши не наведен на блок с информацией – передний фон с планетой Юпитер полупрозрачный, когда же курсор наведен – прозрачности нет и передний фон хорошо виден.
 

Как же его создать на своем сайте?

Оказывается достаточно просто.

Для этого заходим в панель управления вашим сайтом на wordpress, открываем любую запись (можно создать данный эффект не только в записи, но и в любом месте вашего сайт, например в шапке) и переходим в ее редактор, в закладку HTML.

А теперь просто вставляем блок div, к нему мы позднее припишем нужный стиль, который и создаст вышеуказанный эффект.

<div id="jupiter">
    <h2>Jupiter</h2>
    <p>Jupiter, the most massive planet in our solar system &mdash; with dozens of moons and an enormous magnetic field &mdash; forms a kind of miniature solar system. Jupiter does resemble a star in composition, but it did not grow big enough to ignite. The planet's swirling cloud stripes are punctuated by massive storms such as the Great Red Spot, which has raged for hundreds of years. (NASA)</p>
</div>

Пока ничего необычного, просто блок div и текст.

Далее нам нужно открыть файл стилей (style.css) нашего сайта и прописать для данного блока (div id=”jupiter”) следующий стиль:

#jupiter {
    position:relative;
    z-index:1;
    width:340px;
    height:440px;
    padding:20px 280px 20px 20px;
    margin:0 auto;
    color:#fcfcfc;
    background:#000;
}

#jupiter:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:url('https://mnogoblog.ru/wp-content/uploads/2012/11/jupiter.jpg') no-repeat;
    opacity:0.5;
}

#jupiter:hover:before {
    opacity:1;
}

Вот и все, готово!

Давайте разберем код стиля для данного блока, которые можно менять под свой вкус.
Идентификатор jupiter – отвечает за стиль отображения самого блока.
Идентификатор jupiter:before – добавляет стиль перед блоком “jupiter”.
Идентификатор jupiter:hover:before – отображение стиля “jupiter:before” при наведении на него курсора.

Подробнее идентификатор jupiter:
Два первых параметра (position, z-index) не трогаем.
width – ширина блока
height – высота блока
padding – отступы текста в блоке сверху, справа, снизу, слева
margin – выравнивание
color – цвет текста в блоке
background – цвет фона блока (#000 – черный, обычно выбирается тот цвет, который преобладает на картинке, расположенной на переднем фоне.)

Подробнее идентификатор jupiter:before:
Семь первых параметров (content, position, z-index, top, bottom, left, right) не трогаем.
background:url – ссылка до картинки, которая будет на переднем плане.
opacity – прозрачность картинки на переднем плане (0 – полная прозрачность, 1 – непрозрачная).

Подробнее идентификатор jupiter:hover:before:
opacity – прозрачность картинки на переднем плане после наведения на блок курсора мыши (0 – полная прозрачность, 1 – непрозрачная).

Экспериментируйте с кодом и получайте интересные визуальные эффекты.

PS: Вот еще один пример кода, для реализации данного эффекта.

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(image.jpg);
   opacity:0.7;
}