图形放大效果

 

<style type="text/css">
			.img-container {
				width: 300px;
				height: 300px;
				background: url('https://img.duoziwang.com/2016/12/08/1534461599.jpg') no-repeat center center;
				border-radius: 50%;
				/* 水平垂直居中 */
				margin: auto auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}

			.img-container::before,
			.img-container::after {
				display: block;
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.img-container::before {
				background-color: rgba(0, 0, 0, 0.5);
			}

			.img-container::after {
				background: url('https://img.duoziwang.com/2016/12/08/1534461599.jpg') no-repeat center center;
				/* clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见，
				哪个区域不可见
				裁剪一张图像，以圆形的方式显示 50%：
				*/
				clip-path:circle(0%) ;
			  transition: 0.5s;
			}
			.img-container:hover::after{
				cursor: pointer;
				clip-path:circle(50%) ;
			}
		</style>

<div class="img-container"></div>