CSS to achieve the mouse through the picture on the image and other than zoom effect (code instance)

This article brings the content is about how to use CSS to achieve the mouse through the Picture slice zoom (slow change, there is transition effect, the process of scaling is animated transition) effect, mainly used in CSS transform properties, CSS3 transition Properties, The following implementation results and specific implementation methods, I hope to help you.

First look at the effect preview

Code interpretation

HTML part of the code

<div class= "Content" ><ul>   <li></li >   <li></li></ul></div>

Defines the container size, Overflow:hidden, which hides the overflow when the size of the child container exceeds the parent container.

                        * {margin:0;padding:0;font-family: "Microsoft Jas Black";} UL Li{list-style:none;}. content{width:310px;height:420px;padding:5px;border:1px solid #000; margin:10px Auto;} /* Define the size of the container */.content ul li{display:block;width:300px;margin:0 auto;margin:5px;overflow:hidden;/* hidden Overflow */border:1px Solid #000;}

Defines the original scale of the picture Transform:scale (1),.

The effect of the image scaling: transition:all 1s ease 0s; all styles are slow (gradually slowing) in 1 seconds, except for ease (the default) transition attributes are: linear (constant speed), ease-in: (acceleration), Ease-out: (deceleration), ease-in-out: (Acceleration and deceleration)

                        . Content ul Li Img{display:block;border:0;width:100%;transform:scale (1); Transition:all 1s ease 0s;-webkit-transform: Scale (1);-webkit-transform:all 1s ease 0s;}

When the mouse moves to the picture, the picture zooms in: The value in scale () is greater than 1, and the value in scale () is less than 1 and shrinks.

                        /* Image magnification */.content ul li:hover Amplify{transform:scale (1.3) transition:all 1s ease 0s;-webkit-transform:scale (1.3);- webkit-transform:all 1s ease 0s;} /* Picture REDUCED */.content ul Li:hover Narrow{transform:scale (0.8) transition:all 1s ease 0s;-webkit-transform:scale (0.8);- webkit-transform:all 1s ease 0s;}