css overflow in a:hover tag

I have an image(a map) with some points of interest placed using position: absolute and the coordinates of each poi. I want it to expand the info of each POI on mouseover using:

.poi a {
    width: 32px;
    height: 32px;
    overflow: hidden

}

.poi a:hover {
    width: 128px;
    height: 192px;
    overflow: auto
}

This works fine in IE, but it doesn't work in firefox or chrome. It isn't cropping the overflow, it just shows all the info at once.

From stackoverflow

• Make them block or inline-block elements because (from the snippet above) the links are inline which will not have overflow.

  .poi a {
      width: 32px; 
      height: 32px; 
      overflow: hidden;
      display: block;
  }