Как при наведении на блок перекрывать его содержимое другим?

Question

[rudaki29rus]

Есть контейнер, надо что бы при наведении на него мышкой весь контент внутри блока перекрывался другим содержимым:
HTML:

<div class="courses-items">
	<div class="item">
		<h3>Текст</h3>
		<img src="" alt="">
		<p>Текст</p>
	</div>
	<div class="item">
		<h3>Текст</h3>
		<img src="" alt="">
		<p>Текст</p>
	</div>
<div>

CSS:

.courses{
	background-color: #5f0466;
	padding: 40px 0;
}

.courses h2{
	text-align: center;
	padding-bottom: 40px;
	font-size: 35px;
}

.courses-items{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;

}

.courses-items .item{
	width: 30%;
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
}
.courses-items .item p{
	width: 97%;
}
.courses-items img{
	width: 90%;
}

Обычно так:

А при наведении надо так:

Answer 1

[Антон Антон]

https://jsfiddle.net/2p586kho/5/

Comments

[rudaki29rus]

не открывает(

[Антон Антон]

rudaki29rus, любой впн с нероссийским ip

[Vladislav]

rudaki29rus, codepen.io рабочий ресурс только