title: Thumbnail only show part of image
body: <p>I've created a popular post widget and it appears that the thumbnail is only showing a portion of the actual image, and not the whole thing. </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      window.setTimeout(function() {
          document.body.className = document.body.className.replace(&amp;#39;loading&amp;#39;, &amp;#39;&amp;#39;);
        }, 10);
    &lt;/script&gt;
  &lt;script type='text/javascript'&gt;                   
  function changeThumbSize(id,size){
  var blogGadget = document.getElementById(id);
  var replacement = blogGadget.innerHTML;
  blogGadget.innerHTML = replacement.replace(/s72-c/g,&amp;quot;s&amp;quot;+size+&amp;quot;-c&amp;quot;);
  var thumbnails = blogGadget.getElementsByTagName(&amp;quot;img&amp;quot;);
  for(var i=0;i&amp;lt;thumbnails.length;i++){ 
  thumbnails[i].width = size; 
  thumbnails[i].height = size; 
  }
  }
  changeThumbSize(&amp;quot;PopularPosts1&amp;quot;,300);                   
  &lt;/script&gt;
  </code></pre>
  
  <p>I've gone through it a million times but can't figure out whats going wrong.</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  .PopularPosts .item-thumbnail a {
  clip: auto;
  display: block;
  height: 180px;
  overflow: hidden;
  width: 300px;
  margin-left: -10px;
  }
  .PopularPosts .item-thumbnail img {
  position: relative;
  top: -30px;
  transition:all .2s linear;
   -o-transition:all .5s linear;
  -moz-transition:all .2s linear;
  -webkit-transition:all .2s linear;
  }
  
  .PopularPosts .item-thumbnail img:hover{
  opacity:.6;
  filter:alpha(opacity=60)
  }
  .PopularPosts .widget-content ul li {
  color: #555555;
  }
  
  .PopularPosts .item-title {
  clear:both;
  font: 11px raleway;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  margin-right: 10px;
  }
  
  .PopularPosts .item-title a{
  color: #000
    }
  .PopularPosts .item-title a:hover{
  color: #515151
    }
  
  .PopularPosts .item-snippet {
  display: none;
  }
  
  .widget .widget-item-control a img {
  height: 18px;
  width: 18px;
  
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Any suggestions?? Thanks :)</p>