CSS move element when hovering on previous div

Question

I'm trying to make a site that uses a "grid" that looks just like the one on www.uve.info/en/ (middle of the page, under "Services") and has the same effect while hovering.

I've made divs with classes "black-cell", "grey-cell" and "white-cell" and ordered them the same way they did. White cells have a negative z-index and are moved left (odd rows) or right (even rows) by 33%. That way, they stay invisible under grey or black cells.

It's easy to get the desired result on odd rows:

.grey-cell:hover + .odd
    visibility: visible
    right: 0

, but the problem arises when I try to do the same thing with white cells in even rows because the HTML structure is different (white cell - black cell - grey cell) and I can't target the previous div.

Unfortunately, I can't use flexbox to change the order of elements due to some reasons that are not important for this topic. I've tried using jquery function "insertBefore", but it changes the HTML structure and doesn't help here.

So, is there a way to change the order of the elements without flexbox, OR to target the previous div with CSS/SASS?

Can you post a fiddle? It's a bit easier to picture the mark-up you're working with — , Feb 18 '16 at 11:18
Duplicate of http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — cimmanon, Feb 18 '16 at 12:10

score 1 · Answer 1 · answered Feb 18 '16 at 11:55

In the site you're refering to, the structure seems to be the same for the two types of effects (move to the left & move to the right).

<div class="item [...]">
      <div class="col [...]">[...]</div>
      <div class="col [...]">[...]</div>
      <div class="col-hover">[...]</div>
</div>

Actually, you can see that for the "Cycle hire" effect (2nd one), there is another "indent" class for the main container of the row (class "item").

<div class="item indent [...]">[same structure as above]</div>

It looks like this class is driving the animation to the left when it's written.

Then, if you take the element having class "col-hover", it's displayed "absolute" and positioned at left:50% inside the class "item".

.item .col-hover {
  left: 50%;
}

But, for "item" and "indent", it's overwritten to be at left: 0. That way, the element is positioned under the central block, which is the second for a transition to the right, and the first for moving to the left.

So when "item" is hovered, "col-hover" goes to the right :

.item:hover col-hover {
  left: 100%;
}

But if the element which has the "item" class also has "indent" class, then the "col-hover" goes to left:-50% (to the left)

.item:hover.indent .col-hover {
  left: -50%;
}

So you can keep the same structure and play with absolute position for the element you want to move. I suppose you have noted the transition on "col-hover" for the animation, changing the left property making the element moving.

Hope this helps !

Thank you! Somehow I skipped it, but I'll definitely try it – tlivaja Feb 18 '16 at 18:59 — tlivaja, Feb 18 '16 at 18:59

score 0 · Answer 2 · answered Feb 18 '16 at 11:51

Please mind the code its a little dirty clean it but it works like you want.

<html>
    <head>
        <style type="text/css">
        .box
        {
         width:200px;
         height:200px;
         background:rgba(0,0,0,120);
         margin:0 auto;
         color:White;
        }
        .big-box
        {
         height:200px;
         width:600px;
         color:White;    
         position:absolute;
         border:1px solid black;
         z-index:-1;
         -webkit-transition:all 0.3s;
        }
        .big-box1
        {
         top:0px;
         left:-200px;
         text-align:right;
        }
        .big-box2
        {
         top:200px;
         left:200px;
         text-align:left;
        }
        .big-box > .box
        {
         display:inline-block;
        }
        .par
        {
         position:relative;
         height:400px;
         width:600px;
         margin:0 auto;
         border:1px solid black;
         overflow:visible;
        }
        .b1:hover~.big-box1
        {
         left:0px;
        }
        .b2:hover~.big-box2
        {
         left:0px;
        }
        </style>
    </head>
    <body>
    <div class="par">
        <div class="box b1">One</div>
        <div class="box b2">Two</div>
        <div class="big-box big-box1">
            <div class="box">OneC</div> 
        </div>
        <div class="big-box big-box2">       
            <div class="box">TwoC</div>
        </div>
    </div>
    </body>
</html>

The OP hasn't provided any markup, how can you be certain this is what they want? — cimmanon, Feb 18 '16 at 12:13
I am not telling the exact way. I just want to convey a way of doing it. Sure there are multiple ways and this is just another way. :) — Shashank Sharma, Feb 18 '16 at 12:43
Actually, this is exactly what I was looking for! Thank you! — tlivaja, Feb 18 '16 at 19:00

Hastig Zusammenstellen · Answer 3 · 2016-02-18T12:42:01.010

Was messing around with this question for a warm up, it's not fully thought through but I'll post in case some of it helps.

fiddle

https://jsfiddle.net/Hastig/7Lb427m4/2/

css

.blocks-wrapper {
    font-size: 0;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.block {
  display: inline-block;
  height: 200px; width: 200px;
}

.hidey {
  font-size: 15px;
  z-index: -1;
  color: red;
  position: absolute;
  left: 50%;
  top: 50%;  bottom: 50%;
  transition: all 1s ease;
}

.blocks-wrapper:nth-child(odd) .block:nth-child(1) {  }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }

.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) {  }


.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {  
  left: 15%;
}

.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {  
  left: 75%;
}

html

<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->

Works like a charm! Thank you! – tlivaja Feb 18 '16 at 19:02 — tlivaja, Feb 18 '16 at 19:02

score -1 · Answer 4 · answered Feb 18 '16 at 11:48

-1

Have tried using the previous sibling selector ~

.grey-cell:hover ~ .even{
visibility: visible;
left: 0;
 }

answered Feb 18 '16 at 11:48

JohnnyP

426
1
7
12

I did, but for some reason it didn't work... – tlivaja Feb 18 '16 at 19:01

CSS move element when hovering on previous div

4 Answers4