-2

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?

enter image description here

VderKaiser
  • 127
  • 1
  • 1
  • 9

1 Answers1

0

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

Warden330
  • 999
  • 1
  • 5
  • 11
  • This only works for the siblings following the one you hover on tho, affect all Elements is not really possible in CSS sadly, i can try out some things and post a second answer later, this will take some time and some weird CSS-Flex Stuff, atleast im not aware of any way this is easily possible – Warden330 Jul 30 '20 at 10:41
  • Hi, thanks for the answer. I tried that already, but the problem is when I hover the third div, the image change only on third and fourth div. The first and second stays unchanged. – VderKaiser Jul 30 '20 at 10:42
  • Yep, because it is simply impossible to do that with pure CSS. CSS = CASCADING style sheets, so they are build in a way that prevents child elements to affect parent elements and also only in one direction on the same level. This is one of the main problems with CSS. – Warden330 Jul 31 '20 at 06:25