Change background image on few divs on the hover - html

Question

I have 4 divs, all of them have their background image. When I hover one of them, that background image should spread over the all divs. Attached is example of how it should work.
How can I achieve this effect with CSS?

Answer 1

example:
.container{
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.card{
height: 500px;
width: 250px;
}
.first{
background-color: red;
}
.first:hover ~ .card{
background-color: red !important
}
.second {
background-color: blue;
}
.third{
background-color: yellow;
}
.fourth{
background-color: green;
}
<div class="container">
<div class="card first"></div>
<div class="card second"></div>
<div class="card third"></div>
<div class="card fourth"></div>
</div>
In this case all the Cards are "siblings" cause they are all direct child elements of container. The ~ selector is for "siblings" there are definetly more elegant solutions for this with SCSS but this generally describes how it works, also look at the following post describing all kinds of Selectors depending on their heritage:
Post