Modulo Hover com Css Tema Sushi

Postado: 23 de agosto de 2021

Modulo Hover com Css Tema Sushi

Neste artigo vamos criar um Hover com css tema Sushi Responsivo para destacar na section do seu site.

vamos adicionar o Html:

<div class="hover_sushi">

    <span class="appIcone icofont-sushi"></span>
    <a href="#" class="appTitulo" title="Sushi"> Sushi</a>
    
    <div class="appMascara">
     <div class="hover_sushi_hoverUm"></div>
     <div class="hover_sushi_hoverDois"></div>
     <img class="appFoto" src="uploads/1.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Sushi</h4>
      <p>
          Sushi é um prato da culinária japonesa que possui origem numa antiga técnica de...
      </p>

      <a href="https://pt.wikipedia.org/wiki/Sushi" target="_blank">Veja mais</a>

    </div>

</div><!--1-->

<div class="hover_sushi">

    <span class="appIcone icofont-sushi"></span>
    <a href="#" class="appTitulo" title="Sushi"> Sushi</a>
    
    <div class="appMascara">
     <div class="hover_sushi_hoverUm"></div>
     <div class="hover_sushi_hoverDois"></div>
     <img class="appFoto" src="uploads/2.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Sushi</h4>
      <p>
          Sushi é um prato da culinária japonesa que possui origem numa antiga técnica de...
      </p>

      <a href="https://pt.wikipedia.org/wiki/Sushi" target="_blank">Veja mais</a>

    </div>

</div><!--2-->

<div class="hover_sushi">

    <span class="appIcone icofont-sushi"></span>
    <a href="#" class="appTitulo" title="Sushi"> Sushi</a>
    
    <div class="appMascara">
     <div class="hover_sushi_hoverUm"></div>
     <div class="hover_sushi_hoverDois"></div>
     <img class="appFoto" src="uploads/3.jpg">
    </div>
    
    <div class="descricao">
      
      <h4>Sushi</h4>
      <p>
          Sushi é um prato da culinária japonesa que possui origem numa antiga técnica de...
      </p>

      <a href="https://pt.wikipedia.org/wiki/Sushi" target="_blank">Veja mais</a>

    </div>

</div><!--3-->

Vamos Adicionar o Css para dar o lindo efeito ao passarmos o mouse.

.hover_sushi { 

    width:100%; 
    height:100%;  
    float:left; 
    position:relative; 
    overflow:hidden;
    margin-bottom:50px; 
}

.hover_sushi .appMascara {

    overflow:hidden; 
    border-radius:100%; 
    background-color: #404040; 
    position:relative; 
    margin-bottom:1em;     
    box-shadow: 0px 15px 13px 2px rgba(0,0,0,0.9); 
    -webkit-box-shadow: 0px 15px 13px 2px rgba(0,0,0,0.9); 
}

.hover_sushi .hover_sushi_hoverUm  { 

    left:0; 
    top:0; 
    background:rgba(12,199,184,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_sushi:hover .hover_sushi_hoverUm { 

    -webkit-box-shadow: inset 0 0 0 15px rgba(201,3,43,0.8); 
    -moz-box-shadow: inset 0 0 0 15px rgba(201,3,43,0.8); 
    box-shadow: inset 0 0 0 15px rgba(201,3,43,0.8);

}

.hover_sushi .hover_sushi_hoverDois { 

    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_sushi:hover .hover_sushi_hoverDois { 

    left:0; 
    top:0; 
    -webkit-transform:scale(0.8); 
    transform:scale(0.8);
    background:rgba(0,0,0,0.8); 
}

.hover_sushi:hover .appIcone   { left:0; top:22%; opacity:100; }
.hover_sushi:hover .appTitulo  { left:0; top:35%; opacity:100; }
.hover_sushi:hover .appFoto    { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1.05); 
    transform:scale(1.05); 
    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;
}

.hover_sushi .appFoto  { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    max-width:100%!important; 
    width:100%; 
    height:auto; 
    border-radius:100%; 
    position:relative; 
    border:none; 
    display:block; 
}

.hover_sushi .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:4em;
}

.hover_sushi .appTitulo   { 

    font-family: Helvetica, sans-serif; 
    position:absolute; 
    opacity:0; 
    top:33%; 
    left:0; 
    z-index:3; 
    color:#fff; 
    text-align:center; 
    width:100%; 
    font-size:1em; 
    text-decoration:none; 
}

.hover_sushi .appIcone,.appTitulo,.appFoto, .hover_sushi_hoverUm, .hover_sushi_hoverDois{

    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_sushi .descricao h4 { 

    color:#ffffff;
    font-size:1.3em; 
    font-family:'open_sansregular'; 
    margin-bottom:1em; 
}

.hover_sushi .descricao p  { 

    color:#cccccc; 
    font-size:0.9em; 
    font-family:'open_sansregular'; 
}

.hover_sushi .descricao a  { 

    color: #c9032b;
    display: block;
    border: 2px #c9032b 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_sushi .descricao a:hover {

    background-color:#c9032b; 
    color:#ffffff; 

}

Veja o Resultado!

Baixar Código Veja Funcionando

Publicado por: loopnerd

379 Visualizações

Deixe um comentário

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