I have been experimenting with CSS to create a unique effect that I haven't seen done before. By using CSS, I was able to make an image grow larger smoothly when the mouse hovers over it. This effect can be great for portfolios or cool menus resembling an Apple OS X dock. However, I recently discovered a site that scaled the image back, making it smaller and then displaying text, which I thought was fantastic. This technique involved JavaScript and a bit of jQuery, but I'm curious if it could be achieved using CSS alone. Below is the code snippet for scaling the image larger:
a:hover, a:focus {
z-index:440
}
a img {
border:0;
-webkit-transition:all .2s;
-moz-transition:all .2s;
}
ul.Port a img {
-webkit-transform-origin: top;/
-moz-transform-origin: top;
}
a:hover img, a:focus img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
}
When attempting to change the values to negative, I encountered issues with the image flashing in and out of size and failing to smoothly scale smaller. I have spent several hours playing around with this, but I can't seem to get it to work properly. Is what I am trying to achieve simply not possible with CSS? Am I overlooking something crucial?