<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3九宫格图片悬停遮罩层特效 - 站长素材</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="image-container">
<div class="image" style="--clip-start: ellipse(0 0 at 0 0); --clip-end: ellipse(150% 150% at 0 0);">
<a href="#"><img src="img/10-200x200.jpg" /><img src="img/10-200x200.jpg" /></a>
</div>
<div class="image" style="--clip-start: inset(100% 0 0 0); --clip-end: inset(0 0 0 0);">
<a href="#"><img src="img/20-200x200.jpg"><img src="img/20-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: ellipse(0 0 at 100% 0); --clip-end: ellipse(150% 150% at 100% 0);">
<a href="#"><img src="img/30-200x200.jpg"><img src="img/30-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); --clip-end: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);">
<a href="#"><img src="img/35-200x200.jpg"><img src="img/35-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: circle(0); --clip-end: circle(125%);">
<a href="#"><img src="img/1-200x200.jpg"><img src="img/1-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: inset(100% 100% 100% 100%); --clip-end: inset(0 0 0 0);">
<a href="#"><img src="img/41-200x200.jpg"><img src="img/41-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: ellipse(0 0 at 0 100%); --clip-end: ellipse(150% 150% at 0 100%);">
<a href="#"><img src="img/51-200x200.jpg"><img src="img/51-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: inset(0 0 100% 0); --clip-end: inset(0 0 0 0);">
<a href="#"><img src="img/61-200x200.jpg"><img src="img/61-200x200.jpg"></a>
</div>
<div class="image" style="--clip-start: ellipse(0 0 at 100% 100%); --clip-end: ellipse(150% 150% at 100% 100%);">
<a href="#"><img src="img/71-200x200.jpg"><img src="img/71-200x200.jpg"></a>
</div>
</div>
</body>
</html>
CSS3九宫格图片悬停遮罩层特效.zip
版权申诉
9 浏览量
2023-10-08
20:48:38
上传
评论
收藏 209KB ZIP 举报
CSS3九宫格图片悬停遮罩层特效.zip （11个子文件） 
jiaoben8247 img 
35-200x200.jpg 35KB 10-200x200.jpg 37KB 61-200x200.jpg 33KB 20-200x200.jpg 36KB 71-200x200.jpg 34KB 41-200x200.jpg 32KB 1-200x200.jpg 50KB 30-200x200.jpg 57KB 51-200x200.jpg 33KB css 
style.css 1KB
index.html 2KB资源评论
