Bonjour, bonsoir c'est ma première fois que j'écris sur un forum, je ne veux pas déranger mais je me sens obliger de demander de l'aide de personne qui s'y connaisse mieux que moi ^^'

Voila mon problème j'ai actuellement une maquette de site que je suis entrain de refaire mais l'animation demandé est très dur pour moi (peut être que pour d'autre c'est simple évidemment) du coup ma question ça serait comment faire que pour toutes mes images, leurs hover qui est hidden et l'eye qui est hidden sois aligner ??

J'ai essayer les grids ou les flex mais ça part en co**lle . :/

J'aimerais pouvoir m'améliorer donc cette maquette est parfaite mais elle me bloque beaucoup ^^'

PARTIE CSS

.hmenu {
	position: relative;
	width: 342px; height: 300px;
	transition: 0.7s;
	display: flex;
	justify-content: center;
	align-items: center;
	
}


i {
	margin: 0;
	color: white;
	font-size: 50px;
    right: 40%;
    bottom: 45%;
    position: absolute;
    visibility: hidden;
    
}

.himghover {
	background: rgba(49, 205, 201, 0.55);
	height: 300px; width: 342px;
	position: absolute;
	visibility: hidden;
	
}


.himg1, .himg2, .himg3, .himg4, .himg5, .himg6, .himg7, .himg8, .himg9, .himg10, .himg11, .himg12{
	background: url(./img/photo_1.jpg) center/cover;
	height: 300px; width: 342px;
	
}

/*Parti qui permet lanimation de limage par dessus*/
.hmenu:hover .himghover, .hmenu:hover i, .hmenu:hover .himg {
visibility: visible;


}

PARTIE HTML

<nav>

		<div class="hmenu">
			<div class="himg1"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg2"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg3"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg4"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg5"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg6"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg7"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg8"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg9"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg10"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg11"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>

		<div class="hmenu">
			<div class="himg12"></div>
			<div class="himghover"></div>
			<i class="far fa-eye"></i>
		</div>
		
	</nav>

Merci a ceux ou à celles qui veulent m'aider et désoler si mon code pique les yeux (Pas beaucoup voir pas de commentaires) et si vous avez des optimisation à m'expliquer ou juste a me donner je serais content aussi.