HTML 单击图片独立显示放大效果实现方法_html img图片点击放大效果
<!DOCTYPE html>
<html>
<head>
<title>图片点击放大效果示例</title>
<style>
.img-container {
position: relative;
display: inline-block;
}
.img-enlargement {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200%; /* 放大倍数 */
height: 200%;
transform: scale(0);
transition: transform 0.5s ease-in-out;
pointer-events: none;
background-size: cover;
background-position: center;
}
.img-container:hover .img-enlargement {
display: block;
transform: scale(1);
pointer-events: auto;
}
</style>
</head>
<body>
<div class="img-container">
<img src="path_to_your_image.jpg" alt="示例图片" />
<div class="img-enlargement" style="background-image: url('path_to_your_image.jpg');"></div>
</div>
</body>
</html>这段代码展示了如何在不使用JavaScript的情况下，通过CSS实现鼠标悬停时图片放大的效果。.img-container 容器包含了一个正常大小的 <img> 元素和一个 .img-enlargement 层，后者在鼠标悬停时通过背景图像显示放大后的效果。通过设置 .img-enlargement 的 transform: scale(0); 在悬停前隐藏放大效果，悬停后通过 transform: scale(1); 显示并放大图像。
评论已关闭