Como animar o estado hover em css

Vamos ver como criar um efeito hover utilizando css3

Quando o utlizador passar o rato sobre uma imagem, esta irá diminuir de tamanho encostando-se à esquerda ou direita deixando ver conteúdo oculto por trás da imagem.

Inicio

Abrir um ficheiro HTML em qualquer editor, criar toda a informação meta e linkar a um ficheiro css vazio. Começamos por criar um conjunto de wrappers. Estes serão posicionais para o nosso conteúdo, sendo a class ‘block’ a mais relevante neste caso já que a iremos utilizar para trabalhar o efeito hover.

001    <div id="page-wrapper">
002    <div class="block">
003    </div><!-- END block -->
004    </div><!-- END wrapper -->

Conteúdo HTML (Esquerda para a direita)

Dentro do wrapper block, começamos por inserir o titulo da página. Em seguida adicionamos HTML para o efeito left-to-right. Criamos uma div com quatro classes chamadas ‘item-hover’, ‘square’, e criamos uma ancora vazia no final para tornar a peça clicável.

001    <h3 id="square" class="section-        heading">Hover effect</h3>
002        <!-- Left to right-->
003        <div class="item-hover square effect     left_to_right"><a href="#">
004        <!-- content goes here -->
005        </a>
006    </div><!-- END item-hover -->

Conteúdo Esquerda – Direita

Agora adicionamos algum conteúdo para o nosso efeito left-to-right hover. Vamos adicionar uma imagem, embora se possa utilizar qualquer coisa que se queira, em seguida adicionamos algum conteúdo por de baixo que esteja relacionado com a imagem, o que inclui um heading e algum texto.

001    <div class="img"><img src="imgs/img01.jpg" alt="img"></div>
002    <div class="info">
003    <h3>About us</h3>
004    <p>Check out all about us and how we got     started?</p>
005    </div>

Conteúdo Esquerda-Direita

Fazemos o mesmo que nos passos anteriores, mas adicionamos a class ‘right-to-left’ em vez da class ‘left-to-right’. Novamente à que pensar sobre a imagem e texto a serem adicionados de forma a que estejam relacionados. A imagem será animada para a esquerda revelando o texto por baixo.

001     <!-- Right to left-->
002        <div class="item-hover square effect     right_to_left"><a href="#">
003        <div class="img"><img src="imgs/img02.    jpg" alt="img"></div>
004        <div class="info">
005        <h3>Our Music</h3>
006     <p>Check out our music and see if     you like it?</p>
007        </div></a>
008        </div><!-- END row -->

CSS

Agora  pegamos no ficheiro CSS, por exemplo ‘styles.css e gravamos na pasta ‘CSS’. Como na maioria dos projetos, a primeira parte do nosso css será um conjunto de instruções ‘reset’. Aqui não nos vamos estender, mas dá para ter uma ideia pelo código abaixo.

001    h1,h2,h3, body {
002        font-family: 'Source Sans Pro';
003        font-weight:300;
004    }
005    h1 { font-size: 3em; }
006    h2 { color:#2c2f36; font-size:2em; margin-    bottom: 15px; }
007    html, body {
008            width: 100%;
009    padding: 0;
010    margin: 0;
011    height: 100%;
012    min-width: 100%;
013    max-width: 100%;
014    overflow: hidden;
015    background: #868a7b;
016 }

Adicionar os wrappers

É prática comum adicionar alguma forma de page-wrapper, e embora não seja vital para este projeto queremos centrar o nosso efeito hover. Podemos conseguir isto dando um tamanho fixo ao nosso wrapper de 1000px e depois para o nosso ‘block’ preenchemos metade e utilizamos ”margin:0 auto’ para centrar o nosso conteúdo.

001   #page-wrapper {
002        width: 1000px;
003        margin: 0 auto;
004    }
005    .block {
006        width: 500px;
007        margin: 0 auto;
008    }

Titulo da Página

Vamos criar algum estilo para o titulo apenas para ficar com um ar menos aborrecido. Utilizamos a Google Font Cabin – damos-lhe o tamanho de 2em e utilizamos o valor branco para a cor e tornamos o texto maiusculo, utilizando letter-spacing podemos tornar o texto mais legível, terminamos com o posicionamento utilizando margens.

001    .section-heading {
002    font-family: 'Cabin Condensed', sans-serif;
003    font-size: 2em;
004    color: white;
005    text-transform: uppercase;
006    letter-spacing: 2px;
007    margin: 20px 0 0 40px;
008    }

Renderizar o box model

A propriedade box-sizing em CSS controla a forma como o box model é tratado em termos de layout e diz ao browser quais as propriedades de tamanho (largura e altura) que devem ser incluidas. Para forçar o browser a renderizar a uma determinada altura e largura igualamos box-sizing a border-box.

001    .item-hover,
002    .item-hover * {
003        -webkit-box-sizing: border-box;
004        -moz-box-sizing: border-box;
005        box-sizing: border-box;006        }

Criar os efeitos hover

Aqui pretendemos apenas garantir que a tag ancora não apresenta qualquer tipo de decoração quando o rato passar. Em seguida definimos as imagens para terem 100% do seu elemento hierárquico.

001    .item-hover a:hover {
002    text-decoration: none;
003    }
004    .item-hover img {
006    width: 100%;007    height: 100%;008    }

Definir o tamanho da imagem

As imagens propriamente ditas vão ter 300px de dimensão. É boa ideia redimensionar as imagens via Photoshop, no entanto vamos utilizar css para garantir que as imagens vão ter a dimensão desejada, e adicionamos uma margin-bottom de 40px.

001    .item-hover.square {
002        position: relative;
003        height: 300px;
004        margin: 40px 0;
005    }
006    .item-hover.square .img {
007        position: relative;
008        width: 300px;
009        height: 300px;
010    }

Borders das imagens

Com as imagens preparadas vamos adicionar borders. Utizamos a propriedade ‘box-shadow: inset’ com 10px de largo. Depois podemos definir a sua cor como branco e dar uma opacidade de 60 utilizando rgba.

001    .item-hover.square .img:before {
002    position: absolute;
003    display: block;
004    content: '';
005    width: 100%;
006    height: 100%;
007    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
008    }

Posicionar a informação

A informação dentro das imagens utilizará posicionamento absoluto. Em seguida definimos a propriedade ‘backface-visibility: hidden’ o que irá definir se um elemento esta punção visível quando não está virado para o ecrã.

001    .item-hover.square .info {
002          position: absolute;
003        top: 0;
004        bottom: 0;
005        left: 0;
006      right: 0;
007        padding: 30px;
008        text-align: center;
009        -webkit-backface-visibility: hidden;
010        backface-visibility: hidden;
011     }

Estilizar a informação

Vamos dar alguma animacao e cor ao nosso conteúdo..

001    .item-hover.square.effect .info {
002        background: #333;
003        pointer-events: none;
004        opacity: 0;
005        -webkit-transition: all 0.35s ease-in-    out;
006        -moz-transition: all 0.35s ease-in-out;
007        transition: all 0.35s ease-in-out;
008        }

Estilizar o titulo do conteúdo

Já agora personalizamos também os títulos.

001    .item-hover.square.effect .info h3 {
002    color: #fff;
003    text-transform: uppercase;
004    position: relative;
005    letter-spacing: 2px;
006    font-size: 20px;
007    margin: 10px 25px;
008    padding: 55px 0 0 0;
009    height: 110px;
010    text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
011    }

Estilizar o texto do conteúdo

001    .item-hover.square.effect .info p {
002    color: #bbb;
003    padding: 10px 5px;
004    font-style: italic;
005    margin: 0px 50px;
006    font-size: 12px;
007    border-top: 1px solid rgba(255, 255, 255,     0.5);
008    }

Adicionar uma transição

Com os estilos já criados, partimos agora para a animação. Vamos criar uma transição para a imagem com easing. Para garantir a visibilidade da imagem definimos o z índex para 10.

001    .item-hover.square.effect .img {
002    z-index: 10;
003    -webkit-transition: all 0.35s ease-in-out;
004    -moz-transition: all 0.35s ease-in-out;
005    transition: all 0.35s ease-in-out;006    }
007

Transformação Left-to-right.

001 /* Left to right effect */
002 .item-hover.square.effect.left_to_right .img {
003 -webkit-transform: scale(1) translateX(0);
004 transform: scale(1) translateX(0);
005 }
006

Posicionar o conteúdo

Para posicionar o conteúdo, utilizamos translateX.

001    ..item-hover.square.effect.left_to_right     .info {
002    -webkit-transform: translateX(-100%);
003    transform: translateX(-100%);
004    }
005

Escalonar a imagem

001    .item-hover.square.effect.left_to_right    a:hover .img {
002        -webkit-transform: scale(0.5)         translateX(100%);
003        transform: scale(0.5) translateX(100%);
004        }

Animar o conteúdo

001    .item-hover.square.effect.left_to_right     a:hover .info {
002    opacity: 1;
003    -webkit-transform: translateX(0);
004    transform: translateX(0);   }

Right to left

001    .item-hover.square.effect.right_to_left     .img {
002        -webkit-transform: scale(1)         translateX(0);
003        transform: scale(1) translateX(0);
004    }
005    .item-hover.square.effect.right_to_left     .info {
006    -webkit-transform: translateX(100%);
007    transform: translateX(100%);
008    }
009    .item-hover.square.effect.right_to_left     a:hover .img {
010    -webkit-transform: scale(0.5)         translateX(-100%);
011    transform: scale(0.5) translateX(-100%);
012    }
013    .item-hover.square.effect.right_to_left     a:hover .info {
014    opacity: 1;
015    -webkit-transform: translateX(0);
016    transform: translateX(0);
017    }

Notas

O poder do css3 é enorme e permite explorar ações bastante criativas. Aqui vimos como animar o estado hover em css, mas temos muitas outras coisas que podemos fazer em css, otimizando o nosso site e conteúdos.
Vê também como criar animação com linhas de jquery e como construir layouts com css grid