title: CSS Transitions max-width and max-height
body: <p>So I have an <code>object</code> inside a <code>div</code> container. The object has the <code>max-width (600px)</code> and <code>max-height (400px)</code> properties set. When I hover the object, the properties are set to <code>none</code> so the object's <code>width</code> and <code>height</code> can be rendered properly. However when moving the mouse out of the <code>object</code> it immediatly changes it's <code>width</code> and <code>height</code> to the <code>max-width (600px)</code> and <code>max-height (400px)</code> values and after one second it falls back to it's original <code>width</code> and <code>height</code> values. </p>
  
  <p>So how can I do the transitions to make the <code>object</code> change it's <code>width</code> and <code>height</code> smoothly, both, when hovering over it and when mousing out.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;!-- Blah blah some head tags here. --&gt;
  &lt;body&gt;
    &lt;div id="c_a"&gt;
      &lt;object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"&gt;&lt;/object&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html{
    font-size: larger;
    width: 100%;
    height: 100%;
  }
  #c_a object{
    transition: width 1s linear .5s, height 1s linear .5s;
    -webkit-transition: width 1s linear .5s, height 1s linear .5s;
    -o-transition: width 1s linear .5s, height 1s linear .5s;
    -moz-transition: width 1s linear .5s, height 1s linear .5s;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 400px;
    vertical-align: text-top;
  }
  #c_a object:hover{
    width: 200%;
    height: 200%;
    max-width: none;
    max-height: none;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Pv4y4/" rel="noreferrer">Fiddle</a></p>