鼠标移到div上时，div缩小。离开时恢复，如何做到？

图片说明

鼠标移到div上时，div缩小。离开时恢复，如何做到这种效果？
求大概思路

<style type="text/css">
.butt {
    width: 200px;
    height: 30px;
    border: 3px solid #f00;
    background-color: #999;
    transition: transform 400ms;
}
.butt:hover {
    transform: scale(0.8,0.8);
}
</style>
</head>
<body>
<div class="butt">button</div>
</body>


 <style>
.abc{width:100px;height:100px;background:#f00}
.abc:hover{width:80px; height:80px; }
</style>
<div class="abc"></div>

代码片段给你，这个可以实现div abc移入会变小，出去回复
用到hover

https://www.cnblogs.com/arealy/p/7737051.html
http://www.php.cn/css-tutorial-410693.html
以上两个你可以看看，基本属性用法都有得。希望帮到你