JSFiddle - React, Tailwind, and code Playground

HTML

<div class="display1">
contenu (image)
</div>
<div class="display2">
<div class="info">
légende
</div>
</div>

CSS

.display1 {
	background-color:#F00;
	z-index:0;
	position:absolute;
	height: 530px;
	width: 320px;
	display: flex;
	}
.display2{
	background-color: rgba(255, 255, 255, 0.5);
	z-index:1;
	position:absolute;
	height: 530px;
	width: 320px;
	display: flex;
	opacity:0;
	}
.display2:hover, .displayright:active {opacity:1;}

.info {
	margin: auto;
	width: 280px;
	}