Partage
  • Partager sur Facebook
  • Partager sur Twitter

Faire apparaître et cacher picto au survol

Sujet résolu
    18 mars 2019 à 10:31:29

    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;
    
    	
    
    }
    
    



    • Partager sur Facebook
    • Partager sur Twitter

    Faire apparaître et cacher picto au survol

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown