DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
17-03-2016

En esta entrada veremos cómo crear un simple efecto hover sobre una imagen como la mostrada en la cabecera de esta entrada.

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:

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 = '
', $blockContainer = $(".blocks"); for (i = 0; i

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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Algunos artículos que te pueden interesar

El elemento Progress Bar HTML5

El elemento Progress Bar HTML5

La función del elemento o etiqueta (tag) progress es la de indicar el estado de terminación de una tarea.

Andrés Cruz 30-12-2013

El atributo pattern en HTML5

El atributo pattern en HTML5

Con este atributo podemos realizar validaciones sin necesidad de usar javascript.

Andrés Cruz 26-07-2013

¿Cómo usar las Mixins en LESS CSS?

¿Cómo usar las Mixins en LESS CSS?

Con los Mixins podemos incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades; funciona de forma muy parecida a las variables pero con clases enteras.

Andrés Cruz 13-09-2013