如何实现带悬停放大镜、点击查看全尺寸原图的图文画廊框？

你要的效果用原生HTML+CSS+少量JS就能做，不需要引入第三方库，下面是完整可直接运行的代码，三个需求点都已覆盖：

完整代码 #

HTML结构 #

<!-- 画廊卡片容器 -->
<div class="gallery-card">
  <!-- 图片区域 -->
  <div class="gallery-img-wrap">
    <img src="https://i.sstatic.net/3zdTS.jpg" alt="画廊示例图" class="gallery-img">
    <!-- hover显示的放大镜图标 -->
    <span class="magnifier-icon">🔍</span>
  </div>
  <!-- 带分割线的文本区域 -->
  <div class="gallery-text">
    <h3>画廊标题</h3>
    <p>这里是画廊对应的描述文本，文本和上方图片之间自带分割线样式，和参考效果一致</p>
  </div>
</div>

<!-- 点击图片弹出的全尺寸查看层 -->
<div class="img-modal">
  <span class="close-btn">×</span>
  <img class="full-size-img" alt="全尺寸原图">
</div>

CSS样式 #

/* 画廊框基础样式 */
.gallery-card {
  width: 350px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
}

/* 图片容器，相对定位用于放置放大镜图标 */
.gallery-img-wrap {
  position: relative;
  cursor: pointer;
}
.gallery-img {
  width: 100%;
  display: block;
}

/* 放大镜图标，默认隐藏 */
.magnifier-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* 鼠标悬停图片时显示放大镜 */
.gallery-img-wrap:hover .magnifier-icon {
  opacity: 1;
}

/* 带分割线的文本模块 */
.gallery-text {
  padding: 16px 20px;
  /* 顶部浅灰边框即为图片和文本之间的分割线 */
  border-top: 1px solid #eee;
}
.gallery-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}
.gallery-text p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 全尺寸图片弹窗样式 */
.img-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.img-modal.show {
  display: flex;
}
.full-size-img {
  max-width: 90vw;
  max-height: 90vh;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

JS交互逻辑 #

// 获取DOM元素
const imgWrap = document.querySelector('.gallery-img-wrap');
const galleryImg = document.querySelector('.gallery-img');
const modal = document.querySelector('.img-modal');
const fullImg = document.querySelector('.full-size-img');
const closeBtn = document.querySelector('.close-btn');

// 点击图片打开全尺寸弹窗
imgWrap.addEventListener('click', () => {
  fullImg.src = galleryImg.src;
  modal.classList.add('show');
})

// 关闭弹窗逻辑
const closeModal = () => {
  modal.classList.remove('show');
  fullImg.src = '';
}
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
  if(e.target === modal) closeModal();
})

功能对应说明 #

• 画廊框：通过给卡片添加圆角、阴影、溢出隐藏实现，匹配参考样式
• 带分割线文本：给文本容器加顶部1px浅灰边框，实现图片和文本之间的分割线效果
• hover显示放大镜：图标用绝对定位居中，默认透明，鼠标悬停在图片区域时改为不透明，搭配平滑过渡效果
• 点击查看全尺寸图：点击图片时把原图地址赋值给弹窗内的图片，弹出全屏遮罩层展示，点击关闭按钮或者遮罩空白区域即可关闭弹窗

内容的提问来源于stack exchange，提问作者the nr