鼠標懸停在圖片的時候圖片放大再還原

鼠標懸停在圖片的時候圖片放大再還原

1.html:

 <div class="row row-padded-mb">
                <div class="col-md-12 yicheng">
                    <a href="./CH/time2.html"><img src="images/2.jpg" style="width: 270px; margin-left:10px; "></a>
                    <a href="./CH/time.html"><img src="images/3.jpg" style="width: 270px; margin-left:10px;"></a>
                    <a href="./CH/mainplace.html"><img src="images/1.jpg" style="width: 270px; margin-left:10px;"></a>
                    <a href="./CH/main.html"><img src="images/4.jpg" style="width: 270px; margin-left:10px;"></a>
                </div>
                    
            </div>

2.css:

.yicheng{
  overflow: hidden;
}
.yicheng img{
  cursor: pointer;
  transition: all 0.6s;
}
    .yicheng img:hover {
          animation-name: pic; /*動畫名字是pic，與上面定義的名字一樣*/
            animation-duration: 1s; /*動畫用時1s*/
    }
    @-webkit-keyframes pic {
        60% {
            -webkit-transform:scale(1.2);
        }
    }
    @-moz-keyframes pic {
        60% {
            -moz-transform:scale(1.2);
        }
    }