Awesome multiple background images effect

This tutorial looks quite long but it's actually a pretty simple effect.

The structure is simple :

As we want 4 blocks of 25%, we need 8 divs in total: 4 divs for the 4 background images and 4 blocks for the content (and the hover effect).

Step 1

Add a Section, add a background image and apply these settings:

Step 2

Add 4 Divs and change their IDs so it's easier to remember than the default IDs names.

I named them #bgpic1 #bgpic2 #bgpic3 #bgpic4
And for each of them, add a class .bgall

Step 3

For each of them, select their IDs and add different background images.

Step 4

Select the class .bgall and change the settings:

So now we have our 4 background images ready. They are all hidden (opacity:0) with a scale of 1.5 (50% bigger) and a transition set to 0.5 second, ready to be animated.

Step 5

Now let's add our blocks. We need 4 Divs.

Just like for the previous Divs, I have changed their IDs to #block1, #block3, #block3 and #block4.
And for each of them, add a class .blocks

Step 6

Select the .blocks class and change the width to 25%.
Set the height to whatever you want.
And very important, set the z-index to 10 (or higher).

Step 7

Finally add a Code Block.

For the CSS:

.showbg {
    transform: none;
    opacity: 1;
    transition: 0.5s all ease;
}

For the Javascript:

(function($) {

  
    $("#block1").on({     
        mouseover: function() { $('#bgpic1').addClass('showbg'); },
        mouseout:  function() { $('#bgpic1').removeClass('showbg'); }
    });
    $("#block2").on({
        mouseover: function() { $('#bgpic2').addClass('showbg'); },
        mouseout:  function() { $('#bgpic2').removeClass('showbg'); }
    });  
      $("#block3").on({
        mouseover: function() { $('#bgpic3').addClass('showbg'); },
        mouseout:  function() { $('#bgpic3').removeClass('showbg'); }
    });  
     $("#block4").on({
        mouseover: function() { $('#bgpic4').addClass('showbg'); },
        mouseout:  function() { $('#bgpic4').removeClass('showbg'); }
    }); 
  
})( jQuery );

It's all about adding and removing a class. Nothing else.

How to make it responsive

We just need to change the properties of 2 elements.

The section

And the class .blocks

The effect is ready, you can test it.

But the 4 blocks are empty, so it's better if you can add some content (title, texts) and style them.
Here is the full CSS of the example at the top of this page:

.showbg {
    transform: none;
    opacity: 1;
    transition: 0.5s all ease;
}

#block1, #block2, #block3, #block4 {
    transition: 0.5s ease background-color;
    cursor: pointer
}

#block1:hover, #block2:hover, #block3:hover, #block4:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#block1, #block2, #block3 {
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
}

More examples from the Unlimited Elements Design Set: