How to create a zoom image with hover effect in CSS3.

Hello I would like to know how I can create a hover zoom image with a slowing effect without javascript.
Here is the CSS code but I want to know how I can add slow-motion effects in CSS.
thank you


  • it's so easy to do... css will look like this :
    a.rollover img {
        width: 100px;
        height: 100px;
    a.rollover:hover > img {
        width: 200px;
        height: 200px;
        -moz-animation: emotion 2s; /* Firefox */}
    @-moz-keyframes emotion
    from {width: 100px;height:100px;}
    to {width:200px;height:200px;}

    p.s as u see this only works with firefox Internet explorer & opera still doesn't support css3 animation.
  • Hi FIRaS,
    Thank you for answer.
    For Opera and Explorer (9), is now possible to use, it's:
    -o-animation: emotion 2s; // For Opera
    -ms-animation: emotion 2s; // For Explorer 9
    -webkit-animation: emotion 2s; // Chrome and Safari
    -moz-animation: emotion 2s; // Firefox 
    -khtml-animation: emotion 2s; //  Konqueror
    -animation: emotion 2s; // When will the standard CSS3??
  • u are welcome :) & thnx for the new detail.. :)
Sign In or Register to comment.