I am looking to achieve a design with 4 divs where one is larger and the other three are smaller. Upon hovering over one of the smaller divs, I want the background-image of the large div to change to match that of the hovered small div. Is there a way to accomplish this using CSS alone?
Here's what I have tried so far:
.mar {
position: relative;
height: 400px;
width: 400px;
background-image: url("http://www.scrapsyard.com/wp-content/uploads/2015/07/Nature.jpeg");
}
#n1 {
display: inline-block;
height: 100px;
width: 100px;
background-image: url("https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg");
}
#n2 {
display: inline-block;
height: 100px;
width: 100px;
background-image: url("http://www.hdwallpapers.in/walls/some_are_different-wide.jpg");
}
#n3 {
display: inline-block;
height: 100px;
width: 100px;
background-image: url("https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg");
}
.mi:hover ~ .mar {
height: 600px;
}<div class="mar">
</div>
<div class="mi" id="n1">
</div>
<div class="mi" id="n2">
</div>
<div class="mi" id="n3">
</div>My goal is for the background image of the large div with class mar to dynamically change to match the hovered small div with class mi. Can this be achieved through CSS alone?