Modulo Hoverlay com Css Tema Esportes

Postado: 27 de agosto de 2021

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: loopnerd

413 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.