CSS3 realize the mouse moved to the picture on the image of the larger (slowly, there is a transition effect, the process of amplification is animated transition, the transition time can be customized)

Source: Internet
Author: User

Reprinted from: http://blog.csdn.net/u014175572/article/details/51535768

CSS3 's Transform:scale () can be scaled or scaled down.

CSS3 's transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.

The effect is as follows:

1. Effect when no mouse is placed on the picture:

2, when the mouse is placed on the picture (the process of amplification is animated transition, the transition time can be customized):

The code is as follows:

1 <!DOCTYPE HTML>  2 <HTML>  3     <Head>  4         <MetaCharSet= "UTF-8">  5         <title></title>  6         <styletype= "Text/css">  7 Div{  8 width:300px;  9 Height:300px;  Ten Border:#000 solid 1px;   One margin:50px Auto;   A Overflow:Hidden;   -             }   - div img{   the cursor:Pointer;   - transition:All 0.6s;   -             }   - Div Img:hover{   + Transform:Scale (1.4);   -             }   +         </style>   A     </Head>   at     <Body>   -         <Div>   -             <imgsrc= "Img/focus.png" />   -         </Div>   -     </Body>   - </HTML>


which

Transition:all 0.6s; Indicates that all attribute changes are completed in a period of 0.6s.

Transform:scale (1.4); Indicates that the picture is scaled by 1.4 times times when the mouse is placed on the picture.

Code: http://download.csdn.net/detail/u014175572/9535023

CSS3 realize the mouse move to the picture of the larger (slowly larger, there is a transition effect, the process of amplification is animated transition, the transition time can be customized)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.