Modulo Hover com css Lista Artigos para Blogs

Neste artigo veja como fazer um Modulo Hover com css Lista Artigos para Blogs

O que é efeito hover no CSS

Um efeito de hover CSS faz com que um componente de interface gráfica responda quando passa o mouse sobre ele. A resposta pode ser na forma de movimento ou uma mudança na aparência. Os efeitos são usados para destacar elementos importantes na página web e melhorar a interatividade do site.

Com efeitos de hover no CSS, você pode manter os visitantes engajados e obrigá-los a passar mais tempo em seu site. Você também pode tornar a experiência do usuário intuitiva, orientando-os sobre o que fazer a seguir. Ao contrário da animação, eles nem sequer retardam um site com a adição de elementos interativos.

Aprenda a adicionar transição no hover com CSS. Transição em Hover. As transições de CSS permitem que você altere os valores da propriedade sem problemas (de um valor para outro), durante uma determinada duração. Adicione um efeito de transição (opacidade e cor de fundo) a um botão no hover: etc.

Basta você usar o hover na definição do elemento que você quer alcançar no CSS. Pense no hover como um pseudo atributo do elemento. Ele de facto serve para identificar qualquer elemento da mesma forma que uma classe serviria. Ao contrário do hábito mais corriqueiro, o hover não precisa ser necessariamente usado no final da definição.

Por exemplo Efeitos em links usando hover CSS Um dos efeitos utilizados em aplicações web é a mudança da cor do texto em um link ao passarmos o mouse sobre ele.

Entretanto, podemos criar diferentes tipos de CSS hover effects com essa pseudo-classe.

Vamos Adicionar o Html:

<div class="hover_feminino">

    <span class="appIcone icon icon-star-3"></span>
    <a href="#" class="appTitulo" title="Moda e Estilo"> Moda e Estilo</a>
    
    <div class="hoverMascara">
     <div class="hover_feminino_hover"></div>
     <img class="appFoto" src="uploads/moda-e-estilo.jpg">
    </div>
    
    <div class="descricao">
      <h4>Moda e Estilo</h4>
      <p>Escreva um breve texto de descrição para este artigo para se destacar melhor. </p>
      <div class="center-btn"><a href="#" class="lermais" title="Leia mais...">Leia mais...</a></div>
    </div>

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

<div class="hover_feminino">

    <span class="appIcone icon icon-heartbeat"></span>
    <a href="#" class="appTitulo" title="Saúde e Beleza"> Saúde e Beleza</a>
    
    <div class="hoverMascara">
     <div class="hover_feminino_hover"></div>
     <img class="appFoto" src="uploads/saude-e-beleza.jpg">
    </div>
    
    <div class="descricao">
      <h4>Saúde e Beleza</h4>
      <p>Escreva um breve texto de descrição para este artigo para se destacar melhor. </p>
      <div class="center-btn"><a href="#" class="lermais" title="Leia mais...">Leia mais...</a></div>                      
    </div>

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

<div class="hover_feminino">

    <span class="appIcone icon icon-paint-brush"></span>
    <a href="#" class="appTitulo" title="Casa e Decoração"> Casa e Decoração</a>
    
    <div class="hoverMascara">
     <div class="hover_feminino_hover"></div>
     <img class="appFoto" src="uploads/casa-e-decoracao.jpg">
    </div>
    
    <div class="descricao">
      <h4>Casa e Decoração</h4>
      <p>Escreva um breve texto de descrição para este artigo para se destacar melhor. </p>
      <div class="center-btn"><a href="#" class="lermais" title="Leia mais...">Leia mais...</a></div>
    </div>

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

Vamos Adicionar o CSS:

.hover_feminino { 

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

.hover_feminino .hoverMascara { 

    overflow:hidden; 
    border-radius:100%; 
    position:relative; 
    margin-bottom:1em; 
    background-color:#939393; 
}

.hover_feminino .hover_feminino_hover  { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    background:rgba(255,0,98,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_feminino:hover .hover_feminino_hover  { 

    left:0; 
    top:0; 
    -webkit-transform:scale(1); 
    transform:scale(1); 
    background:rgba(255,0,98,0.5);
}

.hover_feminino:hover .appIcone  { left:0; top:32%; opacity:100; }
.hover_feminino:hover .appTitulo { left:0; top:41%; opacity:100; }

.hover_feminino:hover .appFoto  { 

    left:0; 
    top:0; 
    opacity:1; 
    -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_feminino .appFoto   { 

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

.hover_feminino .appIcone  { 

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

.hover_feminino .appTitulo   { 

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

.hover_feminino .appIcone,.appTitulo,.appFoto, .hover_feminino .descricao .lermais, .hover_feminino_hover{

    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;
}

.hover_feminino .descricao    { 

    background-color:transparent; 
    float:left; 
    width: 100%; 
    display:block; 
    text-align:center; 
    padding: 0.5em; 
}

.hover_feminino .descricao h4 {
     
    width:100%;
    float:left; 
    color:#ff0062; 
    font-size:1.3em; 
    font-family:'open_sansregular', sans-serif;
    margin-bottom:1em; 
}

.hover_feminino .descricao p  { 
    
    width:100%;
    float:left;
    color:#939393; 
    font-size:1em; 
    font-family:'open_sanslight', sans-serif;
    margin-bottom:1em; 

}

.hover_feminino .descricao .center-btn { 

    width:100%; 
    float:left; 
}

.hover_feminino .descricao .lermais { 

    color: #fff;
    font-size: 1.2em;
    font-family: 'open_sanslight', sans-serif;
    text-decoration: none;  
    background-color: #ff0062;
    padding: 0.3em 0.8em;
    border-radius:6px;
    display:inline-block;
    width:auto;

}

.hover_feminino .descricao .lermais:hover { 

    background-color:#4c4c4c; 
    text-decoration:none; 
}


/*Vamos deixar Responsivo*/

/*768PX BREAKPOINT*/
@media (min-width:48em){

.hover_feminino { width:32%; margin-right:2%; margin-bottom:0em; }
.hover_feminino:nth-of-type(3n+0) { margin-right:0px; }

}

/*1280PX BREAKPOINT*/
@media (min-width:80em){

.hover_feminino .appIcone    { display:block; }
.hover_feminino .appTitulo   { display:block; }

 
} 

Baixar Código Veja Funcionando