Hoverlay legenda com Css

Hoverlay legenda com Css

Neste artigo vamos fazer um hoverlay com a TAG (figure e figcaption) do html estilizado com css.

<figure>

o elemento figure é uma marcação de uso específico para inserção de uma figura .

para incluir a descrição dessa figura , podemos utilizar o elemento figure.

Sobre o figure saiba mais Neste Artigo Conheça as principais tags semânticas do html5

Vamos Adicionar o Html:

<figure>

  <img src="uploads/1.jpg" title="Aline BBB 15 - Globo.com" alt="" />
  <div class="mascara"></div>

  <figcaption>
    
    <h1>Moça Bonita</h1>
    <p>Escreva uma pequena descrição do perfil do usuário aqui.</p>

    <ul>
        <li> <a href="#" title="facebook"> <i class="icon icon-facebook"></i> </a> </li>
        <li> <a href="#" title="instagrm"> <i class="icon icon-instagram"></i> </a> </li>
        <li> <a href="#" title="twitter"> <i class="icon icon-twitter"></i> </a> </li>

    </ul>    

  </figcaption>

</figure><!--1-->

<figure>

  <img src="uploads/2.jpg" title="Aline BBB 15 - Globo.com" alt="" />
  <div class="mascara"></div>
  
  <figcaption>
    
    <h1>Moça Bonita</h1>
    <p>Escreva uma pequena descrição do perfil do usuário aqui.</p>

    <ul>
        <li> <a href="#" title="facebook"> <i class="icon icon-facebook"></i> </a> </li>
        <li> <a href="#" title="instagrm"> <i class="icon icon-instagram"></i> </a> </li>
        <li> <a href="#" title="twitter"> <i class="icon icon-twitter"></i> </a> </li>

    </ul>    

  </figcaption>

</figure><!--2-->

<figure>

  <img src="uploads/3.jpg" title="Aline BBB 15 - Globo.com" alt="" />
  <div class="mascara"></div>
  
  <figcaption>
    
    <h1>Moça Bonita</h1>
    <p>Escreva uma pequena descrição do perfil do usuário aqui.</p>

    <ul>
        <li> <a href="#" title="facebook"> <i class="icon icon-facebook"></i> </a> </li>
        <li> <a href="#" title="instagrm"> <i class="icon icon-instagram"></i> </a> </li>
        <li> <a href="#" title="twitter"> <i class="icon icon-twitter"></i> </a> </li>

    </ul>    

  </figcaption>

</figure><!--3-->

Vamos Adicionar o Css:

figure{ 

       width:100%;
       height:auto;
       float:left;
       position:relative;
       overflow:hidden;
       border-radius:8px;
      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.40);
       box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.16);
       margin-bottom:30px;

       }

figure img { 

    width:100%; 
    height:100%;  
    -webkit-transform:scale(1); 
    transform:scale(1);
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease;
}

figure:hover img{ 

    -webkit-transform:scale(1.1); 
    transform:scale(1.1);

}

figure .mascara { 

    background: rgb(2, 0, 36);
    background: linear-gradient(184deg, rgba(2,0,36,0) 30%, rgba(0, 0, 0, 0.60) 100%);    
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;

}              


figcaption h1{

    width:auto; 
    font-size:1.5em; 
    color:#00cfff; 
    padding:0px; 
    margin-bottom:10px; 
    font-family:Verdana, Geneva, sans-serif;
    font-weight:100; display:block;  
}

figcaption p { 

    color:#FFF; 
    margin-bottom:10px;
}


figcaption ul    { 

    width:100%; 
    float:left;
}

figcaption ul li { 

    float:none;
    text-align: center;
    display:inline-block;

}

figcaption ul li a { 

    color:#fff; 
    font-size:1.3em; 
    width:40px;
    height:40px;
    line-height:45px;
    text-decoration:none;
    border-radius:50px;
    border:1px transparent solid;
    display:block;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    
}

figcaption ul li a:hover { 
   
   border:1px #00cfff solid;
   color:#00cfff;

 }

figcaption{
           width:100%;
           background-color:#000;
           opacity:0;
           left:0;
           bottom:-10px;
           color:#FFF;
           font-family:Verdana, Geneva, sans-serif;
           font-size:0.9em;
           text-align:center;
           padding:10px;
           position:absolute;
           z-index:2;
           
           transition:all 0.8s;
           -webkit-transition:all 0.5s;
           -moz-transition:all 0.5s;
           -o-transition:all 0.5s;
           
           }

figure:hover figcaption { bottom:0; opacity:0.7; }

/*Responsivo*/
/*768PX BREAKPOINT*/
@media (min-width:48em){

figure{ 
   
   width:31.3%; 
   margin-right:3%; 
   margin-bottom:0; 
}

figure:nth-of-type(3n+0){ margin-right:0; }

} 

Veja o Resultado!

Baixar Código Veja Funcionando