diff --git a/README.md b/README.md
index 570fc7f..3bef5fc 100644
--- a/README.md
+++ b/README.md
@@ -254,6 +254,7 @@
244. HTML5+CSS3小实例：粘性文字的滚动效果
245. HTML5+CSS3小实例：简约灵动的深色登录界面
246. HTML5+CSS3小实例：可爱的卷纸开关
+247. HTML5+CSS3+JS小实例：图片九宫格
#### 赞赏作者
diff --git a/code/247/247.css b/code/247/247.css
new file mode 100644
index 0000000..8aa03d0
--- /dev/null
+++ b/code/247/247.css
@@ -0,0 +1,44 @@
+*{
+ /* 初始化 */
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ /* 100%窗口宽高 */
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(200deg, #fdd6bd, #f794a4);
+ /* 弹性布局 居中显示 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.img-container{
+ /* 网格布局 3行3列 间隙20px */
+ display: grid;
+ grid-template-rows: 100px 100px 100px;
+ grid-template-columns: 100px 100px 100px;
+ gap: 20px;
+ /* 过渡 */
+ transition: 0.5s ease;
+}
+.img-item{
+ width: 100px;
+ height: 100px;
+ /* 内阴影（内边框） */
+ box-shadow: inset 0 0 0 1px #fff;
+ background-image: url(/images/247.jpg);
+ background-size: 300px 300px;
+ /* 设置背景图像的起始位置，--bgX、--bgY为自定义变量，后面通过JS计算并赋值 */
+ background-position: var(--bgX, 0) var(--bgY, 0);
+ /* 过渡 */
+ transition: 0.5s ease;
+}
+/* 悬停样式 */
+.img-container:hover{
+ gap: 0;
+}
+.img-container:hover .img-item{
+ box-shadow: inset 0 0 0 0 #fff;
+}
\ No newline at end of file
diff --git a/code/247/247.html b/code/247/247.html
new file mode 100644
index 0000000..08b910d
--- /dev/null
+++ b/code/247/247.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ 图片九宫格
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/code/247/247.js b/code/247/247.js
new file mode 100644
index 0000000..52ed66d
--- /dev/null
+++ b/code/247/247.js
@@ -0,0 +1,15 @@
+// 获取所有item
+const items=document.querySelectorAll('.img-item');
+
+// 遍历所有item
+for(let i=0;i