css鼠标移入图片缩放, 移出恢复原样

注意外面的div一定要比里面的图片大

<div class="img-box">
     <img class="right-img" src="{{'/uploads/'.$val->cover}}" alt="">
</div>

.img-box {
    width: 30%;
    height: 180px;
    position: relative;
    overflow: hidden;
    /*background: #ececec;*/
    margin-right: 5%;
}
.right-img {
    /*z-index:2;*/
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-transition: -webkit-transform 1s ease 0s;
    transition: transform 1s ease 0s;
    -webkit-transform-origin: center;
    transform-origin: center;
}
.right-img:hover {
    cursor: pointer;
    /*transition: 0.7s;*/
    /*transform: scale(0.9);*/

    /*-webkit-transform: scale(0.9);*/
    transform: scale(0.9);
}