Transition of two divs on hover

Question

Ok so i almost figured this one out but i'm stuck on the last bit.. Here's my code:

/* valuecanvas */

#wrappercs {
  margin-top: 3px;
  width: auto;
  height: auto;
  display: block;
  float: right;
  background: url(http://i67.tinypic.com/30ayjhg.jpg);
  border: 2px solid;
}

#valuecanvas2 {
  width: 640px;
  height: 297px;
  background: url(http://i65.tinypic.com/2kfu6f.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  padding: 0px;
}

#valuecanvas2 li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#valuecanvass2 li,
#valuecanvas2 a {
  height: 200px;
  display: block;
}


/* Gains + gainscreaters */

#gains2 {
  background: url(http://i64.tinypic.com/j73t55.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 338px;
  top: 7px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#gains2:hover {
  background: url(http://i65.tinypic.com/14433ad.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 338px;
  top: 7px !important;
  -webkit-transform: translate(-15px, -20px);
  -moz-transform: translate(-15px, -20px);
  -o-transform: translate(-15px, -20px);
  -ms-transform: translate(-15px, -20px);
  transform: translate(-15px, -20px);
}

#gains2:hover ~ #gainscreaters2 {
  background: url(http://i64.tinypic.com/micsw5.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 139px;
  left: 16px;
  top: 7px !important;
  -webkit-transform: translate(15px, -15px);
  -moz-transform: translate(15px, -15px);
  -o-transform: translate(15px, -15px);
  -ms-transform: translate(15px, -15px);
  transform: translate(15px, -15px);
}

#gainscreaters2 {
  background: url(http://i67.tinypic.com/imqgx4.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 139px;
  left: 16px;
  top: 7px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#gainscreaters2:hover {
  background: url(http://i64.tinypic.com/micsw5.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 139px;
  left: 16px;
  top: 7px !important;
  -webkit-transform: translate(20px, -15px);
  -moz-transform: translate(20px, -15px);
  -o-transform: translate(20px, -15px);
  -ms-transform: translate(20px, -15px);
  transform: translate(20px, -15px);
}

#gainscreaters2:hover ~ #gains2 {
  background: url(http://i65.tinypic.com/14433ad.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 338px;
  top: 7px !important;
  -webkit-transform: translate(-15px, -20px);
  -moz-transform: translate(-15px, -20px);
  -o-transform: translate(-15px, -20px);
  -ms-transform: translate(-15px, -20px);
  transform: translate(-15px, -20px);
}


/* jobs + services */

#jobs2 {
  background: url(../customerpains/jobs.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 125px;
  height: 213px;
  left: 501px;
  top: 50px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#jobs2:hover {
  background: url(../customerpains/jobskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 125px;
  height: 213px;
  left: 501px;
  top: 50px !important;
  -webkit-transform: translate(15px, 0px);
  -moz-transform: translate(15px, 0px);
  -o-transform: translate(15px, 0px);
  -ms-transform: translate(15px, 0px);
  transform: translate(15px, 0px);
}

#services2:hover ~ #jobs2 {
  background: url(../customerpains/jobskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 125px;
  height: 213px;
  left: 501px;
  top: 50px !important;
  -webkit-transform: translate(15px, 0px);
  -moz-transform: translate(15px, 0px);
  -o-transform: translate(15px, 0px);
  -ms-transform: translate(15px, 0px);
  transform: translate(15px, 0px);
}

#jobs2:hover ~ #services2 {
  background: url(images/serviceskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 131px;
  height: 290px !important;
  left: 15px;
  top: 8px !important;
  -webkit-transform: translate(-20px, 0px);
  -moz-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  -ms-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
}

#services2 {
  background: url(images/services.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 131px;
  height: 290px !important;
  left: 15px;
  top: 8px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#services2:hover {
  background: url(images/serviceskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 131px;
  height: 290px !important;
  left: 15px;
  top: 8px !important;
  -webkit-transform: translate(-20px, 0px);
  -moz-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  -ms-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
}


/* pains + painreleavers */

#pains2 {
  background: url(../customerpains/pains.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 339px;
  top: 151px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#pains2:hover {
  background: url(../customerpains/painskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 338px;
  top: 151px !important;
  -webkit-transform: translate(-10px, 15px);
  -moz-transform: translate(-10pxpx, 15px);
  -o-transform: translate(-10px, 15px);
  -ms-transform: translate(-10px, 15px);
  transform: translate(-10px, 15px);
}

#pains2:hover ~ #painreleavers2 {
  background: url(images/painreleaverskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 150px;
  left: 16px;
  top: 151px !important;
  -webkit-transform: translate(20px, 20px);
  -moz-transform: translate(20px, 20px);
  -o-transform: translate(20px, 20px);
  -ms-transform: translate(20px, 20px);
  transform: translate(20px, 20px);
}

#painreleavers2 {
  background: url(images/painreleavers.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 150px;
  left: 16px;
  top: 151px !important;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

#painreleavers2:hover {
  background: url(images/painreleaverskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 286px;
  height: 150px;
  left: 16px;
  top: 151px !important;
  -webkit-transform: translate(20px, 20px);
  -moz-transform: translate(20px, 20px);
  -o-transform: translate(20px, 20px);
  -ms-transform: translate(20px, 20px);
  transform: translate(20px, 20px);
}

#painreleavers2:hover ~ #pains2 {
  background: url(../customerpains/painskleur.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 245px;
  height: 143px;
  left: 338px;
  top: 151px !important;
  -webkit-transform: translate(-10px, 15px);
  -moz-transform: translate(-10pxpx, 15px);
  -o-transform: translate(-10px, 15px);
  -ms-transform: translate(-10px, 15px);
  transform: translate(-10px, 15px);
}

<div id="wrappercs">
  <ul id="valuecanvas2">
    <li id="gains2"></li>
    <li id="jobs2" ></li>
    <li id="pains2" ></li>
    <li id="gainscreaters2"></li>
    <li id="services2"></li>
    <li id="painreleavers2"></li>
 </ul>
</div>

And here's my jsfiddle

If you hover on the "gains" the transition works for the "gainscreators" as well. but for some reason it doesn't work the other way around.. i thought it maybe was a one way thing so i tried to let out the #gains2:hover ~ #gainscreaters2 but with no success either.

am i missing something?

Answer 1

You can not select preceding elements using CSS. Instead, put them both inside another ul with id as below

HTML:

<div id="wrappercs">
  <ul id="valuecanvas2">
    <li>
      <ul id="gainsAnimation">
      <li id="gains2"></li>
        <li id="gainscreaters2"></li>
      </ul>
    </li>

    <li id="jobs2" ></li>
    <li id="pains2" ></li>
    <li id="services2"></li>
    <li id="painreleavers2"></li>
 </ul>
</div>

CSS:

/* Gains + gainscreaters */

#gains2 {
    background:url(http://i64.tinypic.com/j73t55.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 245px;
    height: 143px;
    left: 338px;
    top: 7px !important;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
#gainsAnimation:hover #gains2 {
    background:url(http://i65.tinypic.com/14433ad.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 245px;
    height: 143px;
    left: 338px;
    top: 7px !important;
     -webkit-transform: translate(-15px, -20px);
    -moz-transform: translate(-15px, -20px);
    -o-transform: translate(-15px, -20px);
    -ms-transform: translate(-15px, -20px);
    transform: translate(-15px, -20px);
}
#gainsAnimation:hover #gainscreaters2{      
    background:url(http://i64.tinypic.com/micsw5.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 286px;
    height: 139px;
    left: 16px;
    top: 7px !important;
     -webkit-transform: translate(15px, -15px);
    -moz-transform: translate(15px, -15px);
    -o-transform: translate(15px, -15px);
    -ms-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
    }
#gainscreaters2 {
    background: url(http://i67.tinypic.com/imqgx4.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 286px;
    height: 139px;
    left: 16px;
    top: 7px !important;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

Fiddle: https://jsfiddle.net/tjjc4vxo/1/