Modulo Hover Com css para Fast Food

Neste Artigo vamos fazer um LINDO Modulo Hover Com css para Fast Food Responsivo.

Vamos Adicionar o Html:

<div class="app_comidas">

    <span class="appIcone icofont-croissant"></span>
    <a href="#" class="appTitulo" title="Salgados"> Salgados</a>
    
    <div class="appMascara">
     <div class="app_comidas_hover"></div>
     <img class="appFoto" src="uploads/1.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Salgados</h4>
      <p>
          Salgadinho é o nome que se dá a aperitivos que podem ser pastelinhos fritos ou ...
      </p>

      <a href="https://pt.wikipedia.org/wiki/Salgado_(comida)" target="_blank">Veja mais</a>

    </div>

</div><!--1-->

<div class="app_comidas">

    <span class="appIcone icofont-burger "></span>
    <a href="#" class="appTitulo" title="Hamburger"> Hamburger</a>
    
    <div class="appMascara">
     <div class="app_comidas_hover"></div>
     <img class="appFoto" src="uploads/2.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Hamburger</h4>
      <p>
        Um hambúrguer é um alimento, normalmente considerado um sanduíche...  
      </p>
      
      <a href="https://en.wikipedia.org/wiki/Hamburger" target="_blank">Veja mais</a>

    </div>

</div><!--1-->

<div class="app_comidas">

    <span class="appIcone icofont-chicken-fry "></span>
    <a href="#" class="appTitulo" title="Coxinhas"> Coxinhas</a>
    
    <div class="appMascara">
     <div class="app_comidas_hover"></div>
     <img class="appFoto" src="uploads/3.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Coxinhas</h4>
      <p>
          A coxinha é um salgadinho brasileiro, de origem paulista, também comum em... 
      </p>

      <a href="https://pt.wikipedia.org/wiki/Coxinha" target="_blank">Veja mais</a>

    </div>

</div><!--1-->

Agora Vamos Adicionar o CSS:

.app_comidas { 

    width:100%; 
    height:100%; 
    margin-bottom:2em; 
    float:left; 
    position:relative; 
    overflow:hidden; 
}

.app_comidas .appMascara { 

    overflow:hidden; 
    border-radius:100%; 
    background-color:#242424; 
    position:relative; 
    margin-bottom:1em; 
    box-shadow: 0px 15px 13px 2px rgba(0,0,0,0.9); 
    -webkit-box-shadow: 0px 15px 13px 2px rgba(0,0,0,0.9); 

}

.app_comidas .app_comidas_hover { 

    left:0; 
    top:0;
    -webkit-transform:scale(1); 
    transform:scale(1); 
    background:rgba(255,210,0,0); 
    border-radius:100%; 
    z-index:2; 
    width:100%; 
    height:100%; 
    position:absolute; 
    transition:all 400ms; 
    -moz-transition:all 400ms; 
    -ms-transition:all 400ms; 
    -o-transition:all 400ms; 
    -webkit-transition:all 400ms;
}

.app_comidas:hover .app_comidas_hover { 

    left:0; 
    top:0; 
    -webkit-transform:scale(0.9); 
    transform:scale(0.9); 
    background:rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 0 10px rgba(252,255,0,100); 
    -moz-box-shadow: inset 0 0 0 10px rgba(252,255,0,100); 
    box-shadow: inset 0 0 0 10px rgba(252,255,0,100);

}

.app_comidas:hover .appIcone  { 

    left:0; 
    top:27%; 
    opacity:100; 
}

.app_comidas:hover .appTitulo { 

    left:0; 
    top:40%; 
    opacity:100; 
}

.app_comidas:hover .appFoto  { 

    left:0; 
    top:0;  
    -webkit-transform:scale(1.1); 
    transform:scale(1.1); 
    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;
}

.app_comidas .appFoto { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    max-width:100%!important; 
    width:100%; 
    height:auto; 
    border-radius:100%; 
    position:relative; 
    border:none; 
    display:block; 

}

.app_comidas .appIcone    { 

    font-family:'open_sansregular';
    position:absolute; 
    opacity:0; 
    top:25%; 
    left:0; 
    z-index:3; 
    color:#fff; 
    text-align:center; 
    width:100%; 
    font-size:3em;

}

.app_comidas .appTitulo   { 

    font-family:'open_sansregular'; 
    position:absolute; 
    opacity:0; 
    top:42%; 
    left:0; 
    z-index:3; 
    color:#fff; 
    text-align:center; 
    width:100%; 
    font-size:1em; 
    text-decoration:none; 
}

.app_comidas .appIcone,.appTitulo,.appFoto, .app_comidas_hover{

    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;

}

.app_comidas .descricao    { 

    background-color:transparent; 
    float:left;
    width: 100%; 
    display:block; 
    text-align:center; 
    padding: 0.5em; 
}

.app_comidas .descricao h4 { 

    color:#ffffff;
    font-size:1.3em; 
    font-family:'open_sansregular'; 
    margin-bottom:1em; 
}

.app_comidas .descricao p  { 

    color:#cccccc; 
    font-size:0.9em; 
    font-family:'open_sansregular'; 
}

.app_comidas .descricao a  { 

    color: #fcff00;
    display: block;
    border: 1px #fcff00 solid;
    padding: 0.6em 0.5em;
    text-align: center;
    text-decoration: none;
    width: 130px;
    margin: auto;
    margin-top: 20px;
    border-radius: 3px;
    font-family:'open_sansregular';
    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;

}

.app_comidas .descricao a:hover {

    background-color:#fcff00; 
    color:#000; 

}

Veja o Código Pronto Funcionando.

Baixar Código Veja Funcionando