Modulo Hoverlay com Css Tema Serviços
Postado: 8 de setembro de 2021
Tempo de Leitura: 2 Minutos
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
Publicado por: Loop Nerd
719 Visualizações
Deixe um comentário