鼠标移到图片上,图片放大

.Nei1 img{
    
                
	width: 122px;            
	height: 89.6px;            
	float: left;            
	padding: 2px 2px;            
	transition: all 0.6s;        
}        
.Nei1 img:hover{
    
                
	transform: scale(3.3);        
}

例:将鼠标悬停在一个 div 元素上,逐步改变表格的宽度和高度会从 100px 到 300px:

设置DIV的 overflow: hidden; 属性,作用是图片变大后超过DIV区域的部分会自动隐藏。

设置 transition: all 0.6s: 是变化速度,数值越小速度越快
transform: scale(1.4); 是变化范围, scale(1.4) 是放大1.4倍的意思。

鼠标移到图片上,图片增大

W3School transition

transform属性

猜你喜欢

转载自blog.csdn.net/weixin_43717681/article/details/105558541