Width toggle on hover

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, so .wrapper should grow in width and shrink in width as .contents does. There should be no set width for .contents.

by Ryan Brackett

HTML

<div class="wrapper">

  <div class="contents">
    
      <img src="https://www.ngpg.org/fullpanel/uploads/files/uc-long.jpg" 
    </div>
  </div>
</div>

CSS

.wrapper {
  background: #DDD;
  padding: 20px;
  display: inline-block;
  width: auto;
}



.contents {
  background: #c3c;
  overflow: hidden;
  white-space: nowrap;
  margin: auto;
  width: 0%;
}

.inner{padding: 10px;}

.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: 100%;
}