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

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Loader cuadrado

Loader cuadrado

Algunos artículos que te pueden interesar

Algunos efectos interesantes que se pueden lograr con listas en CSS

Algunos efectos interesantes que se pueden lograr con listas en CSS

En esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D).

Andrés Cruz 30-04-2015

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014

La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path de CSS permite especificar regiones de cualquiera de los elementos existentes en HTML a través de formas geométricas.

Andrés Cruz 18-12-2014