JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagevide">
	<div class="carre">
		<p>reward <span>1000</span> <br> golden coins</p>
		<p class="titre">Gandalf</p>
	</div>

		<p class="titre_">Gandalf</p>
	
</div>

CSS

body
{
	margin: 0px;
	padding: 0px;
	background-image: url("https://www.vulgaris-medical.com/sites/default/files/styles/big-lightbox/public/field/image/actualites/2018/02/26/le-chat-source-de-bienfaits-pour-votre-sante_1.jpg?itok=839wZP-t");
	background-repeat: no-repeat;
}

.imagevide{
	width: 500px;
	height: 572px;
	background-color: rgba(255, 255, 255, 0.5);
}


.carre{
	background-color: rgba(255, 255, 255, 0.8);
	width: 90%;
	height: 25%;
	margin: auto;
	position: relative;
	top: 30px;
	border-radius: 15px;
}

p{
	text-align: center;
	font-size: 40px;
	margin: 0px;
	position: relative;
	top: 30px;

}

span{
	color: orange;
}

.titre{
	font-size: 90px;
	color: white;
	position: relative;
	top: 150px;
}

.titre_{
  display:none;
	font-size: 40px;
	color: white;
	position: relative;
	top: 350px;
}

.imagevide:hover {
	background-color: transparent;
}
.imagevide:hover .titre {
	display:none;
}
.imagevide:hover .titre_ {
	display: block;
}