Modulo Hover com Css Tema Sushi

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