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.