CSS3鼠标经过图片放大

css

        .main { width: 900px; margin: 20px auto; }
        .course-list-img { width: 255px; height: 300px; overflow: hidden; float: left; margin: 10px; }
        .course-list-img img { display: block; -webkit-transition: 1s; transition: 1s; }
        .course-list-img .img_1:hover { -webkit-transform: scale(0.8,1.2); -moz-transition: scale(0.8,1.2); }
        .course-list-img .img_2:hover { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); }
        .course-list-img .img_3:hover { -webkit-transform: scale(-1.2,1.2); -moz-transform: scale(-1.2,1.2); }
        .course-list-img .img_4:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); }

        .div-img { width: 255px; height: 300px; margin: 30px auto; }
        .div-img .img-1 { display: block;  -webkit-transition: 1s; transition: 1s; }
        .div-img .img-1:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); }

 

html

    <div class="main">

        <div class="course-list-img">
            <img class="img_1" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>
        <div class="course-list-img">
            <img class="img_2" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>
        <div class="course-list-img">
            <img class="img_3" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>
        <div class="course-list-img">
            <img class="img_4" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>
        <div class="course-list-img">
            <img class="img_4" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>
        <div class="course-list-img">
            <img class="img_4" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
        </div>

    </div>

    <div style="clear:both; height:50px;"></div>


    <div class="div-img">
        <img class="img-1" src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" width="255" height="300">
    </div>