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/
Comments
Post a Comment