Article Html Efeito Hover Css

Article Html Efeito Hover Css

Neste artigo vamos criar Article Html com Efeito Hover estilizado com Css. ao passar o mouse sobre o elemento html article as animações inicia conforme programado e estilizado nos Códigos Css de cada item no html.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Article html vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <article>, <div>, <h3>, <p> e a tag <a> para inserirmos o link de destino. 

Essas tags que usaremos para criar os Article Html Efeito Hover Css.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos articles.

Estrutura Código Html:

    <div class="box-artigos">
    
        <article class="artigo-1">
            
            <div class="circlepic"></div>
            <div class="circleborder">
                <i class="artigoIcon icon icon-html5"></i>                        
            </div>

            <h3>Html</h3>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <a href="#" class="verMais">Saiba mais...</a>

        </article><!--1-->

        <article class="artigo-2">
            
            <div class="circlepic"></div>

            <div class="circleborder">
                <i class="artigoIcon icon icon-css3"></i>                        
            </div>

            <h3>Css</h3>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <a href="#" class="verMais">Saiba mais...</a>


        </article><!--2-->

        <article class="artigo-3">
        
            <div class="circlepic"></div>
            <div class="circleborder">
                <i class="artigoIcon icon icon-wordpress"></i>                        
            </div>                

            <h3>WordPess</h3>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <a href="#" class="verMais">Saiba mais...</a>


        </articlev><!--3-->

    </div> 

Estrutura Código CSS

Para conseguirmos o efeito desejado nos Articles, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os Articles com o efeito desejado.

.box-artigos {

  width: 100%;
  height: auto;
  float: left;

}

.artigo-1 {
  
  display: inline-block;
  width:100%;
  height: 100%;
  float: left;
  background: #363636;
  text-align: center;
  transition: all 0.25s;
  padding-bottom: 30px;
  border-radius:10px;
  margin-bottom: 20px;

}

.artigo-2 {
  
  display: inline-block;
  width:100%;
  height: 100%;
  float: left;
  background: #363636;
  text-align: center;
  transition: all 0.25s;
  padding-bottom: 30px;
  border-radius:10px;
  margin-bottom: 20px;


}

.artigo-3 {

  display: inline-block;
  width:100%;
  height: 100%;
  float: left;
  background: #363636;
  text-align: center;
  transition: all 0.25s;
  padding-bottom: 30px;
  border-radius:10px;
  margin-bottom: 20px;


}

.artigo-1:hover               { background: #007cff; }
.artigo-1:hover .circlepic    { background: #5c5c5c; }
.artigo-1:hover .circleborder { background: #333333; }

.box-artigos h3 {
  
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  margin: 180px 0 auto;
  text-align: center;
  color: #fff;

}

.box-artigos p {

  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  color: #fff;
  padding: 0 15px;
  line-height: 30px;

}

.box-artigos .verMais { 

  color: #202020;
  text-decoration: none;
  background-color: #007cff;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 6px;
  margin: 15px 0 auto;

}

.box-artigos .artigoIcon {
  
  width: 90px;
  height: 90px;
  display: grid;
  text-align: center;
  font-size: 42px;
  color: #fff;
  background: transparent;
  border-radius: 50px;
  align-content: center;

}

.artigo-1:hover h3       { color: #2b2b2b; }
.artigo-1:hover .verMais { color: #ffffff; background-color: #2b2b2b; }

.artigo-2:hover h3   { color: #2b2b2b; }
.artigo-2:hover .verMais { color: #ffffff; background-color: #2b2b2b; }

.artigo-3:hover h3 { color: #2b2b2b; }
.artigo-3:hover .verMais { color: #ffffff; background-color: #2b2b2b; }

.artigo-3:hover articleIcon { color: #2b2b2b; }

.artigo-1:hover .artigoIcon, .artigo-2:hover .artigoIcon, .artigo-3:hover .artigoIcon {
  transition: all 0.65s;
  transform: rotateY(360deg);
}

.artigo-1:hover { background: #007cff; }
.artigo-1:hover .circleborder{ background: #2b2b2b; }

.artigo-2:hover { background: #007cff; }
.artigo-2:hover .circleborder{ background: #2b2b2b; }

.artigo-3:hover { background: #007cff; }
.artigo-3:hover .circleborder{ background: #2b2b2b; }

.circleborder {

  width: 90px;
  height: 90px;
  background: transparent;
  margin: -150px auto;
  border-radius: 50%;

}

.circlepic {

  margin: 50px auto;
  width: 110px;
  height: 110px;
  background: #5c5c5c;
  border-radius: 50%;

}

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

  .artigo-1 { width:32%; margin-bottom:0; margin-right:2%; }
  .artigo-2 { width:32%; margin-bottom:0; margin-right:2%; }
  .artigo-3 { width:32%; margin-bottom:0; }

}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Article Html Efeito Hover Css

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Article html com Css.

existem diversas formas de estilizar o html article com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.