Eu usarei efeitos de foco de imagem csS3 em CSS puro

Fácil de usar os belos Efeitos de Hover de Imagem para o seu próprio site. Basta inserir no arquivo CSS existente e aproveitar os novos Efeitos de Hover de Imagem.
Recursos

    Puro CSS
    Sem JavaScript ou jQuery
    Mais de 40 Efeitos de Hover
    Funciona de forma independente

Efeitos

    Zoom In & Zoom Out
    Girar para Direita & Esquerda
    Origem
    Quadrado & Elipse
    Quadrado & Redondo
    Mudança de camada de fundo
    Girar & Escalar
    Girar-x / -y / -z
    Mudança de imagem 3D
    De nítido para desfocado
    Cor para escala de cinza
    Sombra interna
    Opacidade da imagem
    Rolagem da imagem
    Sombra da imagem
    Hover na camada
    Hover na camada de imagem
    Hover na camada de texto
    Deslizamento da camada
    Deslizamento de camada e título
    Hover no painel da camada
    Hover no conteúdo da camada

Atenção – Suporte aos navegadores

    IE9 não suporta efeito de transição
    IE7 e IE8 não suportam border-radius, sombra de caixa, efeito de transição
    ... mais informações de compatibilidade de navegador, veja a “Captura de Tela de Compatibilidade”