Hover effects on images with CSS

- Andrés Cruz

En español
Hover effects on images with CSS

In this post we will see how to create a simple hover effect on an image like the one shown in the header of this post using a little CSS, HTML and JavaScript (jQuery).

To do this, place an image as a background in a container and place multiple consecutive boxes (divs) of a fraction of the size of the background without a defined color so that they are invisible by default; to facilitate their insertion, we use a simple JavaScript that will create these containers; When we position ourselves above the boxes using CSS Transitions: it progressively becomes semi-transparent:

Example

Move the cursor from one end of the image to the other.

The CSS for the document consists of an image that takes up the entire page; which would be a little more complicated to do through an img tag:

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

The CSS of the boxes is as follows:

    .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;
    }

This is the JavaScript that allows you to build the boxes on top of the image:

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

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

And this is all, with this we obtain the effect shown above.

As a result of this, we can change the effect a little and instead of the opacity appearing varied, we will make them appear by establishing internal borders with a little CSS:

Example

Move the cursor from one end of the image to the other.

The CSS is the following:

    .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);
    }

As usual, I leave the original link of the simple but interesting effect: Hover Block Effect.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.