JavaScript/CSS : Make image expand up and to left on rollover effect

Question

我想让用户在鼠标悬停时展开缩略图以查看大头像。但是，我目前的翻转效果将表格行扩展到扩展图像的大小，而不是在周围的文本上显示图像。任何人都可以建议一种在翻转时扩展图像而不移动文本的方法，换句话说，在其他 html 之上显示更大的图像而不是将其推开。我已经尝试过 z-index，但这似乎不起作用。

这是一个演示问题的 jsfiddle:

http://jsfiddle.net/gLr9Q/

这是与 js fiddle 中相同的代码:

<script language="JavaScript">
  <!-- hide from non JavaScript Browsers
  image = new Array()
  image[0]= new Image(24,24)
  image[0].src = "http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
  image[1] = new Image(48,48)
  image[1].src = "https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
</script>
<tr><td colspan=2>
<p align="center"> 
<a href="contactdetail.php"
  onmouseover="newPic()"
  onmouseout="oldPic()">
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
  name="pic" 
class="rollover"  
    border=0>
</a> 
</p></td></tr>
<tr><td>Here is text</td></tr>

js

function newPic(){
    document.pic.style.left="-24px";
    document.pic.style.top="-24px";
     document.pic.src = image[1].src;
    return true;
  }

  function oldPic(){
    document.pic.src = image[0].src; 
    return true;
  }

CSS:

#rollover {
  display: block;
  z-index:99;
  padding: 4px;
  position:relative;
  text-align:left;
  width:48px;
  background-color:#E8E8E8;
  opacity:1.0;
  filter:alpha(opacity=100); 
}

Answer 1

盗自 CSSplay - magnify ，你可以在没有 Javascript 的情况下做到这一点

HTML:

<tr>
    <td colspan=2>
        <p align="center">  <a class="rollover" href="contactdetail.php">
            <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/>
            <span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span>
</a> 
        </p>
    </td>
</tr>
<tr>
    <td>Here is text</td>
</tr>

CSS:

a.rollover {
    display: block;
    position: relative;
}
a.rollover span {
    position: absolute;
    left: -10000px;
}
a.rollover:hover span {
    position: absolute;
    left: 200px;
}

JSFiddle

更新:

我不知道，如果这是你的想法，但你可以把大图放在任何你想要的地方

CSS:

a.rollover:hover span {
    position: absolute;
    left: 120px;
    top: -20px;
}

JSFiddle

如果你想在悬停时隐藏下图，你可以尝试添加opacity: 0

<img class="thumbnail" src="...">

和

a.rollover:hover .thumbnail {
    opacity: 0;
}

JSFiddle

不过，我不知道这是否适用于所有浏览器。