Select DIV with another DIV that is outside that DIVs Parent using strictly CSS

Question

Is there any way to trigger a div outside of a div without using Javascript. I tried CSS combinators and couldn't get it to work. I'm not sure if I just did it wrong or it's not possible. If anyone knows a way to achieve this I would appreciate the help.

.wrapper{
  display: flex;
  flex-direction: row;
}
.overlay{
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.5; 
} 
.bottom:hover .overlay, .top:hover .overlay {
  bottom: 0;
  height: 100%; 
}                   
.top{
  position: relative;
  width: 200px; 
  height: 200px;
  margin: 25px 25px 0px 0px;
  background-color: black; 
}

.bottom{
  height: 200px; 
  width: 200px; 
  background-color: green;
  margin-top: 25px; 
}

<div class="wrapper">
  <div class="top">
    <div class="overlay"></div>
  </div>
  <div class="bottom"></div>
</div>

can you specify the particular class that is the trigger and the one that is to be triggered — Udendu Abasili, May 13 '21 at 01:29
Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Jon P, May 13 '21 at 01:47
What do you mean by "trigger" a div? CSS triggers nothing, it selects. What exactly are you trying to select, based on what? — Jon P, May 13 '21 at 01:48
Please refine your question and add more detail as to what your expected outcome is. — dale landry, May 13 '21 at 02:02

Justin · Accepted Answer · 2021-05-13T13:26:23.403

Yes but to an extent. In this example I can rotate the second div in the html flow by hovering over the first div using ~.

#one {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}
#two {
  position: absolute;
  right: 10px;
  width: 100px;
  height: 100px;
  background: blue;
}
#one:hover ~ #two{
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  to {transform: rotate(360deg)}
}

<div id="one"></div>

<div id="two"></div>

For your code if you place <bottom> before <top> in html you can hover over the green to make the overlay animate. html

<div class="wrapper">
    <div class="bottom"></div>
  <div class="top">
    <div class="overlay"></div>
  </div>
</div>

CSS

.bottom:hover ~ .top .overlay{
  bottom: 0;
  height: 100%; 
}

UPDATE:

.wrapper{
  display: flex;
  flex-direction: row-reverse;
  width: min-content;
}
.overlay{
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.5; 
} 
.bottom:hover ~ .top .overlay{
  bottom: 0;
  height: 100%; 
}      
.top{
  position: relative;
  width: 200px; 
  height: 200px;
  margin: 25px 25px 0px 0px;
  background-color: black; 
}

.bottom{
  height: 200px; 
  width: 200px; 
  background-color: green;
  margin-top: 25px; 
}

<div class="wrapper">
    <div class="bottom"></div>
  <div class="top">
    <div class="overlay"></div>
  </div>
</div>

Not exactly how I wanted to achieve it, but it works just as well. The bottom element was where text (title and a link) would be - but having it above the image is just as fine too. So, for future reference if it's below the parent DIV it won't work, it has to be above the parent div? — Justin Lucas, May 13 '21 at 05:55
@JustinLucas Basically CSS is processed in ONE direction. You can traverse from ancestor to descendant but not the other way around. You can also traverse to subsequent siblings, but not previous siblings. Anything else requires javascript. — Jon P, May 13 '21 at 06:22
@JustinLucas you can still have the elements in the order you wanted. I updated my answer with a snippet using `flex`. Although the elements in html are "out of order" they still appear as you had them. — Justin, May 13 '21 at 13:25

Select DIV with another DIV that is outside that DIVs Parent using strictly CSS

1 Answers1