html - Transition of two divs on hover -

ok figured 1 out i'm stuck on last bit.. here's 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 {    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 jsfiddle

if hover on "gains" transition works "gainscreators" well. reason doesn't work other way around.. thought maybe 1 way thing tried let out #gains2:hover ~ #gainscreaters2 no success either.

am missing something?

you can not select preceding elements using css. instead, put them both inside ul id 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/