Postado: 3 de setembro de 2021
Modulo Hoverlay com Css Tema Natureza
Neste artigo veja como fazer um Lindo modulo hovelay com css tema Natureza.
Vamos Adicionar o HTML
<div class="app_animais">
<span class="appIcone icofont-panda"></span>
<a href="#" class="appTitulo" title="Panda"> Panda</a>
<div class="appMascara">
<div class="app_animais_um_hover"></div>
<div class="app_animais_dois_hover"></div>
<img class="appFoto" src="uploads/1.jpg">
</div>
<div class="descricao">
<h4>Panda</h4>
<p>O panda-gigante é um mamífero omnívoro da família Ursidae endêmico da República Popular da China.</p>
<a href="https://pt.wikipedia.org/wiki/Panda-gigante" target="_blank"><i class="icofont-swoosh-right"></i> Veja mais</a>
</div>
</div><!--1-->
<div class="app_animais">
<span class="appIcone icofont-pigeon-1"></span>
<a href="#" class="appTitulo" title="Passáros"> Passáros</a>
<div class="appMascara">
<div class="app_animais_um_hover"></div>
<div class="app_animais_dois_hover"></div>
<img class="appFoto" src="uploads/2.jpg">
</div>
<div class="descricao">
<h4>Passáros</h4>
<p>As Passeriformes são uma grande ordem da classe aves, que compreendem a mais...</p>
<a href="https://pt.wikipedia.org/wiki/Passeriformes" target="_blank"><i class="icofont-swoosh-right"></i> Veja mais</a>
</div>
</div><!--2-->
<div class="app_animais">
<span class="appIcone icofont-fox-alt"></span>
<a href="#" class="appTitulo" title="Lobo"> Lobo</a>
<div class="appMascara">
<div class="app_animais_um_hover"></div>
<div class="app_animais_dois_hover"></div>
<img class="appFoto" src="uploads/3.jpg">
</div>
<div class="descricao">
<h4>Lobo</h4>
<p>O Lobo-do-ártico, também chamado de lobo-polar e lobo-branco, é um mamífero ...</p>
<a href="https://pt.wikipedia.org/wiki/Lobo-do-%C3%A1rtico" target="_blank"><i class="icofont-swoosh-right"></i> Veja mais</a>
</div>
</div><!--3-->
Vamos adicionar o Css
.app_animais {
width:100%;
height:100%;
margin-right:0;
margin-bottom:40px;
float:left;
position:relative;
overflow:hidden;
}
.app_animais .appMascara {
overflow:hidden;
border-radius:100%;
position:relative;
margin-bottom:1em;
}
.app_animais .app_animais_um_hover {
left:0;
top:0;
-webkit-transform:scale(1);
transform:scale(1);
background:rgba(19, 157, 7,0);
-webkit-box-shadow: inset 0 0 0 0px rgba(255,255,255,0);
-moz-box-shadow: inset 0 0 0 0px rgba(255,255,255,0);
box-shadow: inset 0 0 0 0px 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;
}
.app_animais .app_animais_dois_hover {
left:0;
top:0;
-webkit-transform:scale(0);
transform:scale(0);
background:rgb(19, 157, 7,100);
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_animais:hover .app_animais_um_hover {
left:0;
top:0;
-webkit-transform:scale(0.9);
transform:scale(0.9);
background:rgba(19, 157, 7,0);
-webkit-box-shadow:inset 0 0 0 15px rgba(19, 157, 7,100);
-moz-box-shadow:inset 0 0 0 15px rgba(19, 157, 7,100);
box-shadow: inset 0 0 0 15px rgba(19, 157, 7,100);
}
.app_animais:hover .app_animais_dois_hover {
left:0;
top:0;
-webkit-transform:scale(0.82);
transform:scale(0.82);
background:rgba(19, 157, 7,0.5);
}
.app_animais:hover .appIcone { left:0; top:23%; opacity:100; }
.app_animais:hover .appTitulo { left:0; top:34%; opacity:100; }
.app_animais: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;
}
.app_animais .appFoto {
left:0;
top:0;
-webkit-transform:scale(1.1);
transform:scale(1.1);
max-width:100%!important;
width:100%; height:auto;
position:relative;
border:none;
display:block;
}
.app_animais .appIcone {
font-family: Helvetica, sans-serif;
position:absolute;
opacity:0;
top:21%;
left:0;
z-index:3;
color:#fff;
text-align:center;
width:100%;
font-size:3.2em;
}
.app_animais .appTitulo {
font-family: Helvetica, sans-serif;
position:absolute;
opacity:0;
top:36%;
left:0;
z-index:3;
color:#fff;
text-align:center;
width:100%;
font-size:1em;
text-decoration:none;
}
.app_animais .appIcone,.appTitulo,.appFoto, .app_animais_um_hover,.app_animais_dois_hover {
transition:all 500ms;
-moz-transition:all 500ms;
-ms-transition:all 500ms;
-o-transition:all 500ms;
-webkit-transition:all 500ms;
}
.app_animais .descricao {
background-color:transparent;
float:left;
width: 100%;
display:block;
text-align:center;
padding: 0.5em;
}
.app_animais .descricao h4 {
color:#ffffff;
font-size:1.3em;
font-family:'open_sansregular';
margin-bottom:1em;
}
.app_animais .descricao p {
color:#cccccc;
font-size:0.9em;
font-family:'open_sansregular';
}
.app_animais .descricao a {
color: #139d07;
display: block;
border: 1px #139d07 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_animais .descricao a:hover {
background-color:#139d07;
color:#ffffff;
}
Veja o Código Funcionando!
Baixar Código Veja Funcionando
Publicado por: loopnerd
671 Visualizações
Deixe um comentário