Código

3 Cool CSS3 Image Hover Effects

Na web moderna existem inúmeras técnicas que podem ser usadas para criar interações interessantes, mas o mais simples e elegante é geralmente o CSS, e especificamente as adições que vêm com o CSS3.

Antigamente, tínhamos que confiar em JavaScript para esse tipo de efeito, mas graças ao suporte crescente de CSS3 em todos os navegadores, agora é possível configurar efeitos como esses sem qualquer script. Infelizmente, ainda há navegadores (IE9 e abaixo) que não suportam CSS3, portanto você precisará de um substituto para navegadores legados ou tratar o efeito como um aprimoramento progressivo.

Hoje, vamos ver como podemos aplicar efeitos interessantes, mas interessantes, para mostrar e ocultar legendas de imagens.

Se você preferir seguir com o código, você pode baixe os arquivos aqui.

Demo 1

A primeira demonstração é a mais simples: a imagem voará para a direita para revelar a legenda.

A marcação

Para o html da nossa segunda demonstração, usaremos uma marcação muito semelhante à nossa primeira demonstração. Mas desta vez vamos usar o demo-2 como classe e adicionar a classe zero : 

  • This is a cool title!
    Lorem ipsum dolor sit amet.

O CSS

Nosso CSS será quase o mesmo que o primeiro demo, exceto que, desta vez, moveremos nossa imagem para baixo, configurando a propriedade inferior para -96px. Também usaremos a transição do CSS3 para criar um efeito suave: 

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

Demo 3

Para nossa última demonstração, criaremos um efeito de cartão invertido. Isso significa que quando você passa o mouse sobre a imagem, ela gira em torno do eixo para revelar a descrição.