响应图片

响应图片，鼠标移入，图片逐渐放大10%

1) Add HTML

<div class="img-responsive">
    <div class="img-frame">
        <img style="background-image: url(https://i.imgur.com/vHlJFwT.jpg)"/>
    </div>
</div>

2) Add CSS

        div, img {
            height: inherit;
            width: inherit;
        }

        .img-responsive {
            width: 340px;
            height: 210px;
            background-color: #5A5A5A;
            margin: 200px auto;
        }

        .img-frame {
            overflow: hidden;
        }

        .img-frame img {
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            transition: transform 0.9s, opacity 0.9s;

        }

        .img-responsive:hover img {
            transform: scale(1.1, 1.1);
            transition: transform 0.9s, opacity 0.9s;
        }