Modulo Hoverlay com Css Tema Serviços

Modulo Hoverlay com Css Tema Serviços

Neste artigo veja como fazer um modulo hovelay com css tema serviços.

Vamos Adicionar o HTML

<div class="hover_servicos">

    <span class="appIcone icofont-trowel"></span>
    <a href="#" class="appTitulo" title="Construção"> Construção</a>
    
    <div class="appMascara">
     <div class="hover_servicos_um"></div>
     <div class="hover_servicos_dois"></div>
     <img class="appFoto" src="uploads/3.jpg">
    </div>
    
    <div class="descricao">
      <h4>Construção</h4>
      <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim...</p>
      <a href="#" target="_blank">Veja mais</a>
    </div>

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

<div class="hover_servicos">

    <span class="appIcone icofont-screw-driver"></span>
    <a href="#" class="appTitulo" title="Mecânica"> Mecânica</a>
    
    <div class="appMascara">
     <div class="hover_servicos_um"></div>
     <div class="hover_servicos_dois"></div>
     <img class="appFoto" src="uploads/2.jpg">
    </div>
    
    <div class="descricao">
      <h4>Mecânica</h4>
      <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim...</p>
      <a href="#" target="_blank">Veja mais</a>
    </div>

</div><!--2-->

<div class="hover_servicos">

    <span class="appIcone icofont-drill"></span>
    <a href="#" class="appTitulo" title="Marceneiro"> Marceneiro</a>
    
    <div class="appMascara">
     <div class="hover_servicos_um"></div>
     <div class="hover_servicos_dois"></div>
     <img class="appFoto" src="uploads/1.jpg">
    </div>
    
    <div class="descricao">
      <h4>Marceneiro</h4>
      <p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim...</p>
      <a href="#" target="_blank">Veja mais</a>
    </div>

</div><!--3-->

Vamos Adicionar o Css:

.hover_servicos { 

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

.hover_servicos .appMascara { 

    overflow:hidden; 
    border-radius:100%; 
    background-color: #404040; 
    position:relative; 
    margin-bottom:1em; 
}

.hover_servicos .hover_servicos_um  { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    background:rgba(255,255,255,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;
}

.hover_servicos:hover .hover_servicos_um { 

    left:0; 
    top:0; 
    -webkit-transform:scale(0.9); 
    transform:scale(0.9); 
    background:rgba(255,255,255,0.4);
}

.hover_servicos .hover_servicos_dois  { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    background:rgba(12,199,184,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;
}

.hover_servicos:hover .hover_servicos_dois { 

    left:0; 
    top:0; 
    -webkit-transform:scale(0.7); 
    transform:scale(0.7); 
    background:rgba(27,102,205,0.8);
}

.hover_servicos:hover .appIcone { 

    opacity:100; 
    -webkit-transform:scale(1.7); 
    transform:scale(1.7); 
}

.hover_servicos:hover .appTitulo { 

    opacity:100; 
    -webkit-transform:scale(1.1); 
    transform:scale(1.1); 
}

.hover_servicos:hover .appFoto  { 

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

.hover_servicos .appFoto  { 

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

}

.hover_servicos .appIcone    { 

    font-family: Helvetica, sans-serif; 
    position:absolute; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    opacity:0; 
    top:26%; 
    left:0; 
    z-index:3; 
    color:#fff; 
    text-align:center; 
    width:100%; 
    font-size:2em;
}

.hover_servicos .appTitulo   { 

    font-family: Helvetica, sans-serif; 
    position:absolute; 
    -webkit-transform:scale(1.3); 
    transform:scale(1.3); 
    opacity:0; top:35%; 
    left:0; z-index:3; 
    color:#fff; 
    text-align:center; 
    width:100%; 
    font-size:1em; 
    text-decoration:none;

}

.hover_servicos .appIcone,.appTitulo,.appFoto, .hover_servicos_um, .hover_servicos_dois{

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

.hover_servicos .descricao    { 

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

.hover_servicos .descricao h4 { 

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

.hover_servicos .descricao p  { 

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

.hover_servicos .descricao a  { 

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

}

.hover_servicos .descricao a:hover {

    background-color:#1b66cd; 
    color:#ffffff; 

}

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

.hover_servicos { 
   
   width:30%; 
   height:100%; 
   margin-right:4%; 
   float:left; 
   position:relative; 
   overflow:hidden; 
}

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

} 

Veja o Resultado!

Baixar Código Veja Funcionando