I am trying to do something with CSS I do no think has been done before. I have used CSS to make an image animate larger (grow in size smoothly) in scale when the mouse hovers over the img. It is a great effect, and can be used to make nice portfolios or cool menus like an apple OS X dock. However, I saw recently a site that scaled the image back, making it smaller and then showing text and thought it was great. It uses JavaScript and a hint of JQuery, but I was wondering if this can be done in CSS alone? Below is the code 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);
}
If I change the values to negative, I get issues with the img flashing in and out of proper size, and it does nto smoothly scale smaller, but becomes eradicate. Is what I am asking to do just not possible in CSS? Or am I missing something? I have played around with this for a few hours, but cannot get it to just work.
Solution:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
img {
margin-top:50px;
-webkit-transition:all .2s;
-moz-transition:all .2s;
}
img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
}
</style>
</head>
<body>
<img src="top.png" alt="" />
</body>
</html>