Bonjour à tous 

J'ai un petit soucis en CSS 

Je souhaiterai faire apparaître sur mes images un encart gris avec un picto font awesome lors su survol grâce aux transitions . Pour l'encart pas de problème , cependant mon picto oeil reste visible tout le temps alors que je souhaiterai qu'il apparaisse uniquement au survol . 

Voici mon code ainsi qu'une capture d'écran de mon projet 

<figure>
 		<img src ="images/portfolio/tn_01.jpg" alt="photo01" />
 			<figcaption> 
 			<div class="cercle"></div>
					<div class="eye-logo"> 
					<p> <i class="fas fa-eye"></i> </p>
					</div>
			</figcaption>
    </figure>

figure
{
	margin:15px;
	position: relative;
	overflow: hidden;

}

figcaption
{	

	position: absolute;
	bottom:-50px;
	width:250px;
	height:67px;
	transition-property: bottom;
	transition-duration: 2s;												
	display:flex;
	

	
	
}

figure:hover figcaption
{
	width: 250px;
	height:67px;
	position: absolute;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.5); 

	

}

.cercle
{
	  
	  margin-left: 200px;
	  margin-top: -15px;
	  width: 30px;
      height: 30px;
      line-height: 30px;
      border: 2px solid white;
        border-radius: 50% ;   
      vertical-align: middle;
      text-align: center;
      background:rgb(92,173,211);
 
      
     
  }

.eye-logo
{
	position: absolute;
	right: 23px;
	bottom:39px;
	color:white;

	

}