How does the todays Google picture control work

I was looking at the javascript picture control on google search page and 开发者_运维百科I was wondering how I could replicate it. I can see it blows up a picture on the hoverover but I cant find the code they are using in html.

Can some one help me.

I just responded to a similar question @ Jquery Image popout on hover -- my answer was a CSS3 example.

Also, see http://jsfiddle.net/Kai/x4Frn/

Look at the source:

<div id="hplogo-..." style="background-color: rgb(153, 77, 51); position: absolute; width: 201px; height: 121px; left: -28px; top: 31px; z-index: 17;">
  <div style="overflow: hidden; top: 6px; left: 6px; position: absolute; height: 109px; width: 189px; ">
    <a href="/search?q=...">
      <img src="/logos/..." border="0" style="position: absolute; left: -1px; top: -110px; ">
    </a>
  </div>
</div>

The first <div> positions the image and adds a background color. The second <div> hides the overflow to avoid that the image get's out of the box and is placed 6 pixels from the first div, which creates a border. On top of that, the image is placed, and because it is a sprite, it has some offset.

Hovering the first div will change the width and height of the first two divs and will reposition the first div.