title: Why the image is not getting resize in following scenario?
body: <p>I've a set of three horizontal images. Upon hovering each of these images I'm showing tool-tip image. But the issue I'm facing is I'm not able to resize the image. If I go for reducing the height and width of the tool-tip image only the part of image displays. Actually the whole image should be displayed on hover. But it's not happening. Can someone please help me in this regard?</p>
  
  <p>Following is <strong>HTML</strong> code:</p>
  
  <pre><code>&lt;table style="width:100%" id="thumbs"&gt;
                        &lt;tr&gt;
                          &lt;td&gt;&lt;span style="cursor:pointer" id="tooltip1"&gt;&lt;img id="img1" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/&gt;&lt;/span&gt;&lt;/td&gt; 
                          &lt;td&gt;&lt;span style="cursor:pointer" id="tooltip2"&gt;&lt;img id="img2" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/&gt;&lt;/span&gt; &lt;/td&gt;
                          &lt;td&gt;&lt;span style="cursor:pointer" id="tooltip3"&gt;&lt;img id="img3" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/&gt;&lt;/span&gt; &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong> code :</p>
  
  <pre><code>tr span {
      display: block;
      position: relative;
  }
  tr span:hover {
      z-index: 1;
  }
  tr span:hover:after {
      content:"";
      background-image: url('http://lorempixel.com/273/274/');
      position: absolute;
      top:50%;
      left: 50%;
      width: 273px;
      height: 274px;
  } 
  </code></pre>
  
  <p>Can someone please help me in this regard?</p>
  
  <p>JS Fiddle link is as follows: <strong><a href="http://jsfiddle.net/891tvx7d/7/" rel="nofollow">Demo</a></strong></p>