用CSS创建带图像的动画网格布局，鼠标悬停时，左右两列会像开门一样平滑地向两边收缩和展开，支持展开时间、以及图片的自定义，它有助于为网页添加交互式视觉效果，可以在网站标题或特色部分使用此代码，动态展示图片。

下面展示如何使用 CSS 创建悬停网格列打开效果

1.首先设置 HTML 结构。创建一个 id 为 "grid "的 div，并在其中添加三个类别分别为 "left"、"middle "和 "right "的 div 元素。

<div id="grid">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>

2.接下来，使用 CSS 为网格和图像设置样式。为元素设置基本样式，如填充和边距调整，并定义过渡效果以实现流畅的动画效果。使用 CSS 网格属性定义网格布局。设置 grid-template-columns 属性，以便在列之间均匀分配空间。利用 CSS 悬停选择器在网格悬停时触发动画效果。调整 grid-template-columns 属性值，以调整列宽。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
#grid {
	width: calc(100% - 20vmin);
	aspect-ratio: 16 / 7;
	background: linen;
	display: grid;
	grid-template-columns: 1fr 0fr 1fr;
	place-items: center;
	outline: 2px solid #804a00;
	border-radius: 5vmin;
	box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
	overflow: hidden;
}

测试动画，并根据需要进行调整。尝试使用不同的过渡时间，以达到所需的效果。