move div with CSS transition

Question

I am using following code to display a hidden div on hover  I m using the CSS transition property for to fade in the hidden div  Is it possible to slide in the hidden  for example from left to right  div instead of fading in using the CSS only  Here s my code   HTML   lt div class  box  gt       lt a href     gt  lt img src  http   farm9 staticflickr com 8207 8275533487 5ebe5826ee jpg  gt  lt  a gt       lt div class  hidden  gt  lt  div gt   lt  div gt    CSS   box      position  relative          box  hidden         background  yellow      height  300px          position  absolute      top  0      left  0          width  500px      opacity  0          transition  all 1s ease      box hover  hidden      opacity  1      Demo  http   jsfiddle net u2FKM

User · Answer

Just to add my answer  it seems that the transitions need to be based on initial values and final values within the css properties to be able to manage the animation   Those reworked css classes should provide the expected result     x000D   x000D   box  x000D      position  relative    x000D      top 0px  x000D      left 0px  x000D      width 0px  x000D    x000D   x000D   box hover  hidden  x000D      opacity  1  x000D       width  500px  x000D    x000D   x000D   box  hidden      x000D     background  yellow  x000D      height  300px      x000D      position  absolute   x000D      top  0px  x000D      left  0px      x000D      width  0px  x000D      opacity  0      x000D      transition  all 1s ease  x000D    x000D   lt div class  box  gt  x000D   x000D       lt a href     gt  x000D           lt img src  http   farm9 staticflickr com 8207 8275533487 5ebe5826ee jpg  gt  lt  a gt  x000D           lt div class  hidden  gt  lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net u2FKM 2199

User · Answer

This may be the good solution for you  change the code like this very little change   box      position  relative      box hover  hidden      opacity  1      width 500px     box  hidden      background  yellow      height  334px       position  absolute      top  0      left  0      width  0      opacity  0      transition  all 1s ease      See demo here

User · Answer

Something like this   DEMO  And the code I used    box      position  relative      overflow  hidden      box hover  hidden       left  0px      box  hidden           background  yellow      height  300px          position  absolute       top  0      left  -500px          width  500px      opacity  1          -webkit-transition  all 0 7s ease-out         -moz-transition  all 0 7s ease-out          -ms-transition  all 0 7s ease-out           -o-transition  all 0 7s ease-out              transition  all 0 7s ease-out      I may also add that it s possible to move an elment using transform  translate      which in this case could work something like this - DEMO nr2

User · Answer

transition-property width    This should work  you have to have browser dependent code

User · Answer

I added the vendor prefixes  and changed the animation to all  so you have both opacity and width that are animated   Is this what you re looking for   http   jsfiddle net u2FKM 3

[html] move div with CSS transition

Examples related to html

Examples related to css