用layer.js 写一个特效，点击图片，图片放大的特效 完整的例子

<!DOCTYPE html>
<html>
<head>
	<title>Layer.js Image Zoom Effect</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layer/css/layer.css">
	<script src="https://cdn.jsdelivr.net/npm/layer/dist/layer.js"></script>
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #f2f2f2;
		}
<pre><code>	.item {
		margin: 20px;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}

	.item:hover {
		transform: scale(1.05);
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="container">
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=1')">
			<img src="upload://l275KirCshV7It1NpN72iwzzpEu.jpeg">
		</div>
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=2')">
			<img src="upload://9qvyger4HoEAlI0U3pkbr3v6KKt.jpeg">
		</div>
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=3')">
			<img src="upload://v1jEshlijcQJaxr52YqpUqvoSG4.jpeg">
		</div>
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=4')">
			<img src="upload://gfnMLqP16nx6d3IKYjpvXj23jgb.jpeg">
		</div>
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=5')">
			<img src="upload://vKpAQPXNkMBbc5U7SIa2HQyZwkV.jpeg">
		</div>
		<div class="item" onclick="showImage('https://picsum.photos/600/400?random=6')">
			<img src="upload://dr0DrbYLiBzcGjNnjHlnZ3ds5nl.jpeg">
		</div>
	</div>
<pre><code>&lt;script&gt;
	function showImage(url) {
		layer.photos({
			photos: {
				title: 'Image Zoom',
				data: [{
					src: url
				}]
			},
			anim: 5,
			shadeClose: true,
			closeBtn: 1
		});
	}
&lt;/script&gt;
</code></pre>
</body>
</html>

用layer.js 写一个特效，点击图片，图片放大的特效 完整的例子

用layer.js 写一个特效，点击图片，图片放大的特效完整的例子