html5 - Reverse img scale using CSS? -


i trying css no think has been done before. have used css make image animate larger (grow in size smoothly) in scale when mouse hovers on img. great effect, , can used make nice portfolios or cool menus apple os x dock. however, saw site scaled image back, making smaller , showing text , thought great. uses javascript , hint of jquery, wondering if can done in css alone? below code scaling image larger:

a:hover, a:focus {      z-index:440  } img {     border:0;     -webkit-transition:all .2s;      -moz-transition:all .2s; } ul.port 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 change values negative, issues img flashing in , out of proper size, , nto smoothly scale smaller, becomes eradicate. asking not possible in css? or missing something? have played around few hours, cannot 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>

Comments

Post a Comment