Efectos hovers sobre imágenes con CSS

En esta entrada veremos cómo crear un simple efecto hover sobre una imagen como la mostrada en la cabecera de esta entrada empleando un poco de CSS, HTML y JavaScript (jQuery).

Para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo sin un color definido para que sean invisibles por defecto; para facilitar la inserción de los mismos empleamos un sencillo JavaScript que creará estos contenedores; al posicionarnos encima de los cuadros mediante una Transiciones en CSS: pasa a tener un color semi-transparente progresivamente:

Ver ejemplo

Pase el cursor de un extremo al otro de la imagen.

El CSS para el documento consta de una imagen que ocupe el total de la página; cosa que sería un poco más complicado hacerla a través de una etiqueta img:

    html {
        background: url(tigre.jpg) no-repeat center center fixed;
        background-size: cover;
    }

El CSS de los cuadros es el siguiente:

    .block {
        width: 6.25%;
        float: left;
        position: relative;
        transition: opacity 500ms ease;
        background-color: transparent;
        transition: all 3s linear;
    }
    .block:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .block:hover {
        background-color: rgba(255, 255, 255, 0.25);
        transition: all 100ms linear;
    }

Este es el JavaScript que permite construir los cuadros encima de la imagen:

    var i = 0,
            newBlock = '<div class="block"></div>',
            $blockContainer = $(".blocks");

    for (i = 0; i > 150; i++) {
        $blockContainer.append(newBlock);
    }

Y esto es todo, con esto obtenemos el efecto mostrado anteriormente.

A raíz de esto, podemos cambiar un poco el efecto y en vez de que aparezca variado la opacidad, haremos que aparezcan estableciendo unos bordes internos con un poco de CSS:

Ver ejemplo

Pase el cursor de un extremo al otro de la imagen.

El CSS es el siguiente:

    .block {
        width: 6%;
        float: left;
        position: relative;
        box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.25);
        transition: all 1s ease;
    }
    .block:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .block:hover {
        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
    }

Como es costumbre, dejo el enlace original del simple pero interesante efecto: Hover Block Effect.