Предотвращать нажатие на элемент psuedo вниз

Question

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

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #333; 
 
} 
 
.box p { 
 
    color: green; 
 
} 
 
.box:before { 
 
    content: ''; 
 
    background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.box:hover:before { 
 
    display: block; 
 
}

<div class="box"> 
 
    <p>content content content</p> 
 
</div>

Вот jsfiddle ссылка

jsfiddle

Есть ли способ, чтобы этот фон изображения псевдо не толкать содержание вниз? Я хотел бы, чтобы контент оставался в том же месте поверх элемента psuedo. (Содержимое, не покрываемое элементом psuedo)

Также вы можете спросить, почему бы не просто изменить цвет фона на панели управления. Это связано с тем, что фоновое изображение является обычным образом, я просто использовал это серое изображение в качестве примера.

Благодаря

Answer 1

Делай так, где вы позиционируете псевдо абсолют.

.box { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #333; 
 
} 
 

 
.box p { 
 
    color: green; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.box:before { 
 
    content: ''; 
 
    display: none; 
 
    position: absolute; 
 
    background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg'); 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.box:hover:before { 
 
    display: block; 
 
}

<div class="box"> 
 
    <p>content content content</p> 
 
</div>

Answer 2

Try:

.box{ 
    width: 200px; 
    height: 200px; 
    background-color: #333; 
    position: relative; 
} 

.box:before{ 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: /* your image here */ 
    z-index: -1; 
}