1

I've got two divs, underneath each other.

When someone hovers over div1, I want it to make it move to the left, as well as make div2 underneath it move to the right.. I've had an attempt at this, but can't seem to complete it..

Here's my code:

    <div id="mainbox">
    <p>bla bla bla text</p>
    </div>
    <br />
    <footer id="mainbox" style="height: 77px;">
    <div id="mainbox2">
        <p>bla text text</p>
    </div>
    </footer>

#mainbox {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 background: red;
 border-radius: 40px;
}

#mainbox:hover {
 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;
 margin-left: -5%;
}

#mainbox:hover ~ #mainbox2 {
 margin-left: -5%;
}

Here's a JSFIDDLE: https://jsfiddle.net/payw97w0/1/

billy23lones
  • 25
  • 3

1 Answers1

1

First things first you should never have same id names.

Here i have just edited the id names/values, you can change as per your requirement.

#mainbox,
#mainbox1 {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  background: red;
  border-radius: 40px;
}
#mainbox1 {
  position: relative;
  right: 0px;
}
#mainbox {
  position: relative;
  left: 0px;
}
#mainbox1:hover {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  right: 5%;
}
#mainbox1:hover ~ #mainbox {
  transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  -ms-transition: .4s;
  left: 20px;
}
<div id="mainbox1">
  <p>bla bla bla text</p>
</div>
<br />
<footer id="mainbox" style="height: 77px;">
  <div id="mainbox2">
    <p>bla text text</p>
  </div>
</footer>

Fiddle : DEMO

divy3993
  • 5,335
  • 2
  • 23
  • 37
  • Cheers for that - would it be possible for it to be vice versa also (when someone hovers over the bottom div, the top one moves)? – billy23lones Sep 18 '15 at 22:01
  • No you can not call the parent div. Only parent can call the child element, not opposite of that is possible. – divy3993 Sep 18 '15 at 22:16
  • @billy23lones It could not be possible by CSS but could try with JavaScript/JQuery. – divy3993 Sep 18 '15 at 23:11