title: Image resize in CSS hover not working
body: <p>I have to scale up the image when I hover over it, it should scale up to 300x225 pixels from 100x75 pixels. Layout seems to work fine, it's just width does not scale up when hovered. Thank you in advance. The image should not scale more than the 300x225 pixels.</p>
  
  <p>CSS:</p>
  
  <pre><code>.hoverbox a .preview {
     display: none; 
  }
  .hoverbox a .preview img {
     display: inline; 
  }
  .hoverbox a:hover .preview {
     display: block;
     position: absolute;
     top: -1em;
     left: -2em;
     z-index: 10;
     border-width: 1px 1px 6px 1px; 
     border-style: solid; 
     border-color: #fff7ea;
     border-radius: 3px; 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     -moz-box-shadow: 2px 2px 2px #161615;
     -webkit-box-shadow: 2px 2px 2px #161615;
     box-shadow: 2px 2px 2px #161615;
  }
  .hoverbox img {
     background: #fff;
     border-width: 1px 1px 6px 1px; 
     border-style: solid; 
     border-color: #fff7ea;
     border-radius: 3px; 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     -moz-box-shadow: 2px 2px 2px #161615;
     -webkit-box-shadow: 2px 2px 2px #161615;
     box-shadow: 2px 2px 2px #161615;
         padding: 2px;
     vertical-align: top;
     width: 100px;
     height: 75px;
  }
  .hoverbox li
  {
     background: transparent;
     display: inline;
     float: left;
     margin: 3px;
     padding: 5px;
     position: relative;
   }
  
  .hoverbox .preview {
     width: 300px;
     height: 225px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;section&gt;  
           &lt;h1 class="headline"&gt;Feast your eyes.&lt;/h1&gt;
           &lt;ul class="hoverbox"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;&lt;img src="200opt.jpg" alt="descr"/&gt;&lt;img src="200opt.jpg" alt="description" class="preview" /&gt;&lt;/a&gt;
              &lt;/li&gt;
           &lt;/ul&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>Thank you </p>