这种效果如何通过HTML/CSS实现？

要在HTML/CSS中实现鼠标悬停时显示下拉图片的效果，你可以结合CSS的`:hover`伪类和`position`属性。下面是一个简单的例子：

<!-- HTML部分 -->
<div class="tooltip-container">
  <span class="text">点击获取更多信息</span>
  <img class="tooltip-image" src="your-image-url.jpg" style="display:none;">
</div>

/* CSS部分 */
.tooltip-container {
  position: relative;
}

.text {
  display: inline-block; /* 或者你想包裹的文字样式 */
}

.tooltip-image {
  position: absolute; /* 隐藏原生显示 */
  bottom: 100%; /* 图片位置在文字下方 */
  left: 50%;
  transform: translateX(-50%); /* 中心对齐 */
  opacity: 0; /* 初始透明度 */
  transition: opacity 0.3s; /* 添加过渡效果，使图片渐显 */
}

.text:hover + .tooltip-image { /* 当鼠标悬浮在文字上时 */
  opacity: 1; /* 显示图片 */
}

在这个例子中，当鼠标移到`.text`元素上时，`.tooltip-image`图片就会从隐藏变为可见。