0

I am currently using onmouseover and onmouseout to swap images on hover. This is working great, but now we would like to add the effect of this scroller - basically, adding the functionality that if image A is 20x20 and the image shown upon hover is 80x80 - how can I get the hover image to open "on top" of the others so the increase in image size does not affect the container or table?

There are a few requirements: The solution needs to work in IE7 and must have the ability to display a different, larger image on hover.

MrsSecker
  • 25
  • 1
  • 1
  • 7
  • You can use a css3 transform (scale or a matrix) with a transition. Its support is not universal (ie9+ for transforms, ie10 for transitions.) – mddw Aug 06 '12 at 21:02
  • similar http://stackoverflow.com/questions/11255586/growing-an-element-on-the-spot-in-css/ – Musa Aug 06 '12 at 21:06
  • Thanks. I understand the concept of swapping an image as well as transform. However, I am needing to combine the two and have not seen a solution that does this. – MrsSecker Aug 07 '12 at 14:20

1 Answers1

0

You can scale it with CSS3.

Here's an example of transform: scale - jsFiddle

And here's the code I used in my example:

<div class="box"></div>

.box {
    width: 50px;
    height: 50px;
    background-color: green;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    -ms-transition: 0.1s ease-out;
}

.box:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
}
Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26