CSS: 鼠标悬浮图片聚焦

目标: 实现当鼠标悬浮于图片时聚焦图片

参考效果: www.msyc.com/omall.html

代码:

// 1. 给图片包裹一个div, 固定该div的尺寸, 并设置隐藏超出部分
// 2. 添加hover属性, 悬浮时放大图片 
.pic {
  width: 250px;
  height: 250px;
  overflow: hidden;
  border-radius: 5px;
  img {
    width: 250px;
    height: 250px;

    opacity: 0.6;
    filter: alpha(opacity=60);
    transition: all 1s ease-in-out;
    &:hover {
      transform: scale(1.5);
    }
  }
}