css -- 图片悬停原区域放大


起风了,唯有努力生存。 ——起风了


说明

实现在div区域上图片能在此放大,但不覆盖掉外面的区域

放大前:

悬停中:


解决

div{  
    /* ... */
    overflow: hidden;  
    /* ... */
}  
div img{  
    /* ... */ 
    transition: all 1s;  
    /* ... */
}  
div img:hover{ 
    /* ... */
    transform: scale(1.2);  
    /* ... */
} 

overflow: hidden; 表示溢出的部分直接隐藏,这样很重要

transition: all 0.6s; 表示所有的属性变化在1s的时间段内完成。

transform: scale(1.4); 表示在鼠标放到图片上的时候图片按比例放大1.2倍