The transition of two sections to freeze

Question

Ok, so I almost figured it out, but I'm stuck on the last bit .. Here is 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 is my jsfiddle

If you induce "profit", the transition also works for "gainscreators". but for some reason this does not work differently. I thought this could be one thing, so I tried releasing #gains2:hover ~ #gainscreaters2 , but without success.

Am I missing something?

Answer 1

You cannot select previous elements using CSS. Instead, put them as inside another ul with id as shown 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/