Modulo Hoverlay com Css Tema Esportes
Postado: 27 de agosto de 2021
Tempo de Leitura: 2 Minutos
Modulo Hoverlay com Css Tema Esportes
Neste artigo veja como fazer um Lindo modulo hovelay com css tema esportes radicais.
vamos adicionar o Html
<div class="hover_esportes">
<span class="appIcone icon icofont-cycling-alt"></span>
<a href="#" class="appTitulo" title="Bike"> Bike</a>
<div class="appMascara">
<div class="hover_esportes_hover_um"></div>
<div class="hover_esportes_hover_dois"></div>
<img class="appFoto" src="uploads/1.jpg">
</div>
<div class="descricao">
<h4>Bike</h4>
<p>
Os termos esporte ou desporto radical, de aventura ou de ação são usados para...
</p>
<a href="https://pt.wikipedia.org/wiki/Esporte_de_aventura" target="_blank">Veja mais</a>
</div>
</div><!--1-->
<div class="hover_esportes">
<span class="appIcone icon icofont-island"></span>
<a href="#" class="appTitulo" title="Surf"> Surf</a>
<div class="appMascara">
<div class="hover_esportes_hover_um"></div>
<div class="hover_esportes_hover_dois"></div>
<img class="appFoto" src="uploads/2.jpg">
</div>
<div class="descricao">
<h4>Surf</h4>
<p>
Os termos esporte ou desporto radical, de aventura ou de ação são usados para...
</p>
<a href="https://pt.wikipedia.org/wiki/Esporte_de_aventura" target="_blank">Veja mais</a>
</div>
</div><!--2-->
<div class="hover_esportes">
<span class="appIcone icon icofont-thin-down"></span>
<a href="#" class="appTitulo" title="Skate"> Skate</a>
<div class="appMascara">
<div class="hover_esportes_hover_um"></div>
<div class="hover_esportes_hover_dois"></div>
<img class="appFoto" src="uploads/3.jpg">
</div>
<div class="descricao">
<h4>Skate</h4>
<p>
Os termos esporte ou desporto radical, de aventura ou de ação são usados para...
</p>
<a href="https://pt.wikipedia.org/wiki/Esporte_de_aventura" target="_blank">Veja mais</a>
</div>
</div><!--3-->
A seguir vamos adicionar o Css
.hover_esportes {
width:100%;
height:100%;
margin-bottom:30px;
float:left;
position:relative;
overflow:hidden;
}
.hover_esportes .appMascara {
overflow:hidden;
border-radius:100%;
background-color: #404040;
position:relative;
margin-bottom:1em;
-webkit-box-shadow: 0px 15px 10px -6px #000000;
box-shadow: 0px 15px 10px -6px #000000;
}
.hover_esportes .hover_esportes_hover_um {
left:0;
top:0;
-webkit-transform:scale(1);
transform:scale(1);
background:rgba(27,102,205,0);
border-radius:100%;
z-index:3;
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_esportes:hover .hover_esportes_hover_um {
left:0;
top:0;
-webkit-transform:scale(0.85);
transform:scale(0.85);
background:rgba(27,102,205,0);
-webkit-box-shadow: inset 0 0 0 5px rgba(255,255,255,100);
-moz-box-shadow: inset 0 0 0 5px rgba(255,255,255,100);
box-shadow: inset 0 0 0 5px rgba(255,255,255,100);
}
.hover_esportes .hover_esportes_hover_dois {
left:0;
top:0;
-webkit-transform:scale(0);
transform:scale(0);
background:rgba(27,102,205,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_esportes:hover .hover_esportes_hover_dois {
left:0;
top:0;
-webkit-transform:scale(1);
transform:scale(1);
background:rgba(27,102,205,0.7);
}
.hover_esportes:hover .appIcone { left:0; top:20%; opacity:100; }
.hover_esportes:hover .appTitulo { left:0; top:34%; opacity:100; }
.hover_esportes: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_esportes .appFoto {
left:0;
top:0;
-webkit-transform:scale(1.15);
transform:scale(1.15);
max-width:100%!important;
width:100%;
height:auto;
border-radius:100%;
position:relative;
border:none;
display:block;
}
.hover_esportes .appIcone {
font-family:'open_sansregular';
position:absolute;
opacity:0;
top:22%;
left:0;
z-index:3;
color:#fff;
text-align:center;
width:100%;
font-size:4em;
}
.hover_esportes .appTitulo {
font-family:'open_sansregular';
position:absolute;
opacity:0; top:34%;
left:0;
z-index:3;
color:#fff;
text-align:center;
width:100%;
font-size:1.3em;
text-decoration:none;
}
.hover_esportes .appIcone,.appTitulo,.appFoto, .hover_esportes_hover_um, .hover_esportes_hover_dois{
transition:all 500ms;
-moz-transition:all 500ms;
-ms-transition:all 500ms;
-o-transition:all 500ms;
-webkit-transition:all 500ms;
}
.hover_sushi .descricao {
background-color:transparent;
float:left;
width: 100%;
display:block;
text-align:center;
padding: 0.5em;
}
.hover_esportes .descricao h4 {
font-family:'open_sansregular';
color:#ffffff;
font-size:1.3em;
margin-bottom:1em;
text-align: center;
}
.hover_esportes .descricao p {
font-family:'open_sansregular';
color:#ffffff;
font-size:0.9em;
text-align:center;
}
.hover_esportes .descricao a {
color: #0084ff;
display: block;
border: 2px #0084ff 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_esportes .descricao a:hover {
background-color:#ffffff;
border: 2px #ffffff solid;
color:#0084ff;
}
Veja o Resultado ficou legal.
Baixar Código
Veja Funcionando
Publicado por: Loop Nerd
514 Visualizações
Deixe um comentário