Galeria de imagens CSS – NÃO JS!

Recentemente, descobri o poder oculto do CSS Transition .
Com CSS Transition você pode salvar estados usando apenas CSS! .

Aqui está um exemplo de uma galeria de imagens sem JS

http://codepen.io/elad2412/pen/yfEGp

Captura de tela

Como Salvar Estado com CSS

Vamos usar este HTML e CSS

HTML

<div class="box"></div>

CSS

.box{
  width:100px;
  height:100px;
  background-color:red;      
}

.box:hover{
  transition:9s;
  transform:translateX(300px);
}

Agora, ao passar o mouse sobre a caixa vermelha, ela se moverá, mas, ao sair do mouse, ela voltará ao seu lugar.

Salvar truque de estado CSS

Para manter o estado da caixa, precisaremos fazer a transição dela por um longo período de tempo e, por isso, não voltaremos.

CSS

.box{
  /*add this style  to box*/
  transition:99999s;
}

Exemplo ao Vivo

É isso que conseguimos salvar estado para o movimento da caixa !.

Lista de eventos CSS psuedo:
-: hover

• :alvo

• :ativo

• :verificado

• :foco

• :visitou

Se gostou desta postagem, você também pode gostar de:

• Evento de destino CSS .

• CSS Click Event ?! .

• Jogo CSS – Sem JS! .

Aproveitar!

Terei todo o gosto em receber o seu UPVOTE. Você está convidado a me seguir ou a minha equipe @Walla! P&D e endosso minhas habilidades.