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.

Imagen

CSS

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy