Question

I want to let users expand thumbnail to see large profile pic on mouseover. However, the rollover effect I have currently expands the table row to the size of the expanded image rather than showing the image over the surrounding text. Can anyone suggest a way to expand images on rollover without moving text around, in other words showing larger image on top of other html rather than pushing it out of way. I have tried z-index and this does not seem to work.

Here is a jsfiddle that demonstrates the problem:

http://jsfiddle.net/gLr9Q/

Here is same code as in 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

Stolen from CSSplay – magnify, you can do this without 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

Update:

I don’t know, if this is what you have in mind, but you can position the larger image anywhere you want

CSS:

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

JSFiddle

If you want to hide the lower image on hover, you can try adding opacity: 0

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

and

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

JSFiddle

Although, I don’t know if this works on every browser.