Animate an element s width from 0 to 100 with it and it s wrapper being only as wide as they need to be without a pre-set width in CSS3 or jQuery

Question

http   jsfiddle net nicktheandroid tVHYg   When hovering  wrapper  it s child element  contents should animate from 0px to it s natural width  Then when the mouse is removed from  wrapper  it should animate back down to 0px  The  wrapper element should only be as wide as it needs to be  allowing  contents to grow   so  wrapper should grow in width and shrink in width as  contents does  There should be no set width for  contents  I m using CSS3  but it could be accomplished in jQuery  that would be fine   The problem  See the JSfiddle     wrapper is not only as wide as it needs to be  when  contents grows  when it s almost at it s full width  it jumps down to the next line When hovering off of  wrapper   contents vanishes  when it should animate down to 0px    x000D   x000D   wrapper   x000D      display  inline-block  x000D   x000D      height  20px  x000D      width  auto  x000D     x000D      padding 10px  x000D     x000D      background  DDD  x000D    x000D   x000D   contents   x000D      display inline-block  x000D     x000D      width 0   x000D     x000D      white-space nowrap  x000D      overflow hidden  x000D     x000D      background  c3c  x000D    x000D   x000D   wrapper hover  contents   x000D      -webkit-transition  width 1s ease-in-out  x000D      -moz-transition  width 1s ease-in-out  x000D      -o-transition  width 1s ease-in-out  x000D      transition  width 1s ease-in-out  x000D   x000D      width 100   x000D    x000D   lt div class  wrapper  gt  x000D       lt span gt   lt  span gt  x000D       lt div class  contents  gt These are the contents of this div lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

a late answer  but I think this one works as required in the question    this one uses z-index and position absolute  and avoid the issue that the container element width doesn t grow in transition  You can tweak the text s margin and padding to suit your needs  and  quot   quot  can be changed to font awesome icons if needed   x000D   x000D  body     font-size  16px      container     height  2 5rem    position  relative    width  auto    display  inline-flex    align-items  center      add     font-size  1 5rem    color   fff    cursor  pointer    font-size  1 5rem    background   2794A5    border-radius  20px    height  100     width  2 5rem    display  flex    justify-content  center    align-items  center    position  absolute    z-index  2      text     white-space  nowrap    position  relative    z-index  1    height  100     width  0    color   fff    overflow  hidden    transition  0 3s all ease    background   2794A5    height  100     display  flex    align-items  center    border-top-right-radius  20px    border-bottom-right-radius  20px    margin-left  20px    padding-left  20px    cursor  pointer      container hover  text     width  100     padding-right  20px    x000D   lt div class  container  gt     lt span class  add  gt   lt  span gt     lt span class  text  gt Add new client lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

Please check following snippet   x000D   x000D      DEBUG    x000D   lwb-col   x000D      transition  box-shadow 0 5s ease  x000D    x000D   lwb-col hover  x000D      box-shadow  0 15px 30px -4px rgba 136  155  166  0 4   x000D    x000D    x000D   x000D   x000D   lwb-col--link   x000D      font-weight  500  x000D    position  relative  x000D    display  inline-block  x000D    x000D   lwb-col--link  after  x000D      border-bottom  2px solid  x000D      bottom  -3px  x000D      content      x000D      display  block  x000D      left  0  x000D      position  absolute  x000D      width  100   x000D      color   E5E9EC  x000D   x000D    x000D   lwb-col--link  before  x000D      border-bottom  2px solid  x000D      bottom  -3px  x000D      content      x000D      display  block  x000D      left  0  x000D      position  absolute  x000D      width  100   x000D      color   57B0FB  x000D      transform  scaleX 0   x000D       x000D   x000D    x000D   lwb-col hover  lwb-col--link  before   x000D      border-color   57B0FB  x000D      display  block  x000D      z-index  2  x000D      transition  transform 0 3s  x000D      transform  scaleX 1   x000D      transform-origin  left center  x000D    x000D   lt div class  lwb-col  gt  x000D     lt h2 gt Webdesign lt  h2 gt  x000D     lt p gt Steigern Sie Ihre Bekanntheit im Web mit individuellem  amp amp  professionellem Webdesign  Organisierte Codestruktur  sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen f  r uns  lt  p gt  x000D   lt span class  lwb-col--link  gt Mehr erfahren lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I think I ve got it    x000D   x000D   wrapper   x000D      background  DDD  x000D      display inline-block  x000D      padding  10px  x000D      height  20px  x000D      width auto  x000D    x000D   x000D   label   x000D      display  inline-block  x000D      width  1em  x000D    x000D   x000D   contents   contents  inner   x000D      display inline-block  x000D    x000D   x000D   contents   x000D      white-space nowrap  x000D      margin-left  -1em  x000D      padding-left  1em  x000D    x000D   x000D   contents  inner   x000D      background  c3c  x000D      width 0   x000D      overflow hidden  x000D      -webkit-transition  width 1s ease-in-out  x000D      -moz-transition  width 1s ease-in-out  x000D      -o-transition  width 1s ease-in-out  x000D      transition  width 1s ease-in-out  x000D    x000D   x000D   x000D   x000D   wrapper hover  contents  inner   x000D      x000D      width 100   x000D    x000D   lt div class  wrapper  gt  x000D       lt span class  label  gt   lt  span gt  lt div class  contents  gt  x000D           lt div class  inner  gt  x000D              These are the contents of this div x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Animating to 100  causes it to wrap because the box is bigger than the available width  100  minus the   and the whitespace following it    Instead  you can animate an inner element  whose 100  is the total width of  contents

User · Answer

Got it to work by transitioning the padding as well as the width   JSFiddle  http   jsfiddle net tuybk748 1    lt div class  label gray  gt    lt  div gt  lt  -- must be connected to prevent gap -- gt  lt div class  contents-wrapper  gt       lt div class  gray contents  gt These are the contents of this div lt  div gt   lt  div gt     gray       background   ddd     contents-wrapper   label   contents       display  inline-block     label   contents       overflow  hidden     must be on both divs to prevent dropdown behavior        height  20px     label       padding  10px 10px 15px     contents       padding  10px 0px 15px     no left-right padding at beginning        white-space  nowrap     keeps text all on same line        width  0       -webkit-transition  width 1s ease-in-out  padding-left 1s ease-in-out           padding-right 1s ease-in-out      -moz-transition  width 1s ease-in-out  padding-left 1s ease-in-out           padding-right 1s ease-in-out      -o-transition  width 1s ease-in-out  padding-left 1s ease-in-out           padding-right 1s ease-in-out      transition  width 1s ease-in-out  padding-left 1s ease-in-out           padding-right 1s ease-in-out     label hover    contents-wrapper  contents       width  100       padding-left  10px      padding-right  10px

User · Answer

I haven t been able to get it to work without specifying a width but the following css worked   wrapper       background   DDD      padding  10px      display  inline-block      height  20px      width  auto      contents       background   c3c      overflow  hidden      white-space  nowrap      display  inline-block      visibility  hidden      width  1px      -webkit-transition  width 1s ease-in-out  visibility 1s linear      -moz-transition  width 1s ease-in-out  visibility 1s linear      -o-transition  width 1s ease-in-out  visibility 1s linear      transition  width 1s ease-in-out  visibility 1s linear      wrapper hover  contents       width  200px      visibility  visible      I m not sure you will be able to get it working without setting a width on it

User · Answer

http   jsfiddle net tVHYg 5    wrapper       background  DDD      padding 1       display inline      height 20px      span       width  1       contents       background  c3c      overflow hidden      white-space nowrap      display inline-block      width 0         wrapper hover  contents       -webkit-transition  width 1s ease-in-out      -moz-transition  width 1s ease-in-out      -o-transition  width 1s ease-in-out      transition  width 1s ease-in-out       width 90

[jquery] Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

Examples related to jquery

Examples related to css

Examples related to css-transitions