鼠标悬停出现遮罩或图片放大效果

说明:作为一个Java后端程序员，有时候也需要自己去写些前端代码，所以将工作中用到的一些小知识做记录分享。

1.鼠标悬停出现遮罩效果

* ①先看效果图：

* ②再献上完整代码：

	
		
		
		
	

	
		

			

				
点击阴影遮罩
				

					

						
						

							
天猫望日
						
					
					

						
						

							
天猫吞日
						
					
					

						
						

							
天猫啸日
						
					
					

						
						

							
天猫喵日
						
					
				
			
		

	

* ③最后稍微做下注解说明：

图片只是静态的，最好可以自己运行上面代码直观感受下效果！

该效果除了可以作用在图片上当然也可以作用在div上；具体解释说明我在Css代码上已经加了注释；

如果看不明白的话可以复制代码，自己用浏览器开发者工具调试一下；自己动手，才能更快领悟；

2.鼠标悬停图片放大效果

* ①先看效果图：

* ②再献上完整代码：

	
		
		
		
	

	
		

			

				
点击图片放大
				

					

						

							
						
					
					

						

							
						
					
					

						

							
						
					
					

						

							
						
					
				
			
		

	

* ③最后稍微做下注解说明：

图片只是静态的，最好可以自己运行上面代码直观感受下效果！

具体解释说明我在Css代码上已经加了注释；

如果看不明白的话可以复制代码，自己用浏览器开发者工具调试一下；自己动手，才能更快领悟；