Modulo Hoverlay com Css Tema Natureza

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