Make Multiple Divs Exchange Background On Hover

I have 4 divs, one is bigger, other 3 are equally small. When I hover on one of the small ones, I want the big one to get the background-image that the small one has. Is this possi

Solution 1:

All I had to was add this css

#n1:hover ~ .mar {
   background-image: url("https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg");  
}

#n2:hover ~ .mar {
   background-image: url("http://www.hdwallpapers.in/walls/some_are_different-wide.jpg");
}

#n3:hover ~ .mar {
  background-image: url("https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg");
}

And place the .mar div at the end like so:

<div class="mi" id="n1">
</div>
<div class="mi" id="n2">
</div>
<div class="mi" id="n3">
</div>
<div class="mar">
</div>

Here's a fiddle, hope this helps, good luck!