如何仅通过CSS实现悬停图片或标题时的图片缩放效果？

问题背景 #

需求为鼠标悬停图片或标题时，图片均呈现缩放（zoom in/out）效果，但当前仅悬停图片时效果生效，悬停标题时无反应，且限制无法修改HTML结构，仅能通过调整CSS解决。

解决方案 #

将hover事件绑定到父容器.country_list_container，这样无论鼠标悬停在图片还是标题（二者均为父容器的子元素），都会触发图片的缩放效果。若需要标题的整个覆盖区域都能触发效果，可额外调整标题元素的尺寸与布局。

修改后的完整CSS代码：

.country_list_container {
  position: relative !important;
}

.country_list_image img {
  display: block !important;
  margin: 0 auto !important;
  transition: all ease-in-out 0.3s !important;
}

/* 核心修改：监听父容器hover事件触发图片缩放 */
.country_list_container:hover .country_list_image img {
  transform: scale(1.2) !important;
}

.country_list_title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* 可选：让标题元素占满父容器，确保悬停标题区域任意位置都能触发效果 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

原理说明 #

原CSS仅监听了.country_list_image的hover事件，而.country_list_title是同级独立元素，悬停标题时不会触发图片容器的hover状态。通过将hover事件切换到父容器，只要鼠标进入父容器范围内（包含图片和标题），就会触发图片的缩放过渡效果，完全符合需求且无需修改HTML结构。

内容的提问来源于stack exchange，提问作者Amrinder Singh