1.图片鼠标悬停 缓慢放大 阴影(不受限于外部容器)

<style type="text/css">
        #div1{
            width: 200px;
            height: 138px;
            border: #000 solid 1px;
            margin: 50px auto;
            /*overflow: hidden;*/
        }
        img {
            width: 200px;
            height: 138px;
            transition: all 2s, transform .5s, box-shadow .5s;
        }
        img:hover{
            box-shadow: 6px 6px 20px rgba(0,0,0,0.6);
            transform: scale(1.4);
        }
        
    </style>
<div id="div1">
    <img src="http://pic19.nipic.com/20120308/4970979_102637717125_2.jpg" />
</div>

2.图片鼠标悬停 缓慢放大(受限于外部容器)

<style type="text/css">
        #div1{
            width: 200px;
            height: 138px;
            border: #000 solid 1px;
            margin: 50px auto;
            overflow: hidden;
        }
        #div1 img{
            width: 200px;
            height: 138px;
            cursor: pointer;
            transition: all 0.6s;
        }
        #div1 img:hover{
            box-shadow: 6px 6px 20px rgba(0,0,0,0.6);
            transform: scale(1.4);
        }
    </style>
<div id="div1">
    <img src="https://img-blog.csdn.net/20160530100006074" />
</div>

更多动画：https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html