如何实现hover图片显示图标，点击图标后弹出图片的交互效果

1. HTML结构修改 #

在body标签末尾新增图片弹窗容器，原有代码保持不变：

<!-- 原有代码保持不变，新增以下内容 -->
<div class="img-popup">
  <img src="" alt="弹出大图">
</div>

2. CSS样式修改 #

在原有CSS基础上新增弹窗样式，同时给可点击的加号图标添加手型光标提示：

/* 原有代码保持不变，新增以下内容 */
.galleryPicture i {
  cursor: pointer;
}

.img-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

.img-popup img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 4px;
}

3. 交互逻辑实现 #

在现有script标签内添加点击事件代码，依托你已经引入的jQuery实现弹窗触发和关闭：

$(function() {
  // 点击hover出现的加号图标，弹出对应图片
  $('.galleryPicture .fa-plus').click(function() {
    const currentImgSrc = $(this).siblings('img').attr('src');
    $('.img-popup img').attr('src', currentImgSrc);
    $('.img-popup').fadeIn();
  });

  // 点击弹窗任意位置关闭弹窗
  $('.img-popup').click(function() {
    $(this).fadeOut();
  });
})

修改完成后即可实现需求：hover图片显示加号，点击加号弹出全屏大图，点击弹窗任意位置可关闭。

内容的提问来源于stack exchange，提问作者yingstah甘