如何实现鼠标悬停时图片中央显示可点击文本链接并保留图片缩放效果

问题需求 #

已完成摄影博客主导航的大部分代码，当前实现了多张图片横向排列、悬停时图片放大展示的效果，但无法实现鼠标悬停在图片上时，图片正中央显示文本链接的功能，希望保留现有缩放效果的同时添加该功能。

现有代码 #

HTML代码 #

<div class="container">
    <div class="box">
      <img src="./adventure/DSC09797.JPG">
      <span>Adventure</span>
    </div>
    <div class="box">
      <img src="./nature/DSC09302.JPG">
      <span>Nature</span>
    </div>
    <div class="box">
      <img src="./adventure/DSC02296.JPG">
      <span>My People</span>
    </div>
    <div class="box">
      <img src="./spoke/DSC00079.JPG">
      <span>Spoke</span>
    </div>
  </div>

CSS代码 #

.container {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;

}

.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    line-height: 0;
}

.box>img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
}

.box>span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}

.box:hover {
    flex: 1 1 10%;
}

.box:hover>img {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

修改方案 #

只需调整HTML标签和CSS定位规则，即可在保留缩放效果的同时实现中央文本链接：

修改后的HTML代码 #

<div class="container">
    <div class="box">
      <img src="./adventure/DSC09797.JPG">
      <a href="#adventure" class="box-link">Adventure</a>
    </div>
    <div class="box">
      <img src="./nature/DSC09302.JPG">
      <a href="#nature" class="box-link">Nature</a>
    </div>
    <div class="box">
      <img src="./adventure/DSC02296.JPG">
      <a href="#my-people" class="box-link">My People</a>
    </div>
    <div class="box">
      <img src="./spoke/DSC00079.JPG">
      <a href="#spoke" class="box-link">Spoke</a>
    </div>
  </div>

修改后的CSS代码 #

.container {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;
}

.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    line-height: 0;
    /* 添加相对定位，作为文本链接的定位基准 */
    position: relative;
}

.box>img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
}

.box-link {
    font-size: 3.8vh;
    color: #fff; /* 设置文本颜色，确保在图片上可见 */
    text-decoration: none; /* 移除默认链接下划线 */
    text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 添加文本阴影提升可读性 */
    /* 绝对定位实现居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 默认隐藏，hover时显示 */
    opacity: 0;
    transition: opacity .3s ease;
}

.box:hover {
    flex: 1 1 10%;
}

.box:hover>img {
    width: 100%;
    height: 100%;
}

/* 悬停时显示中央链接 */
.box:hover .box-link {
    opacity: 1;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

修改说明 #

1. HTML部分：将原有的<span>替换为<a>标签，赋予导航链接功能，同时添加类名box-link方便CSS控制。
2. CSS部分：
   • 给.box添加position: relative，让内部绝对定位元素以它为基准。
   • 对.box-link设置绝对定位，通过top:50%、left:50%配合transform: translate(-50%, -50%)实现完美居中。
   • 设置默认opacity:0隐藏链接，悬停时通过.box:hover .box-link将opacity改为1，实现平滑显示效果。
   • 添加文本颜色、阴影提升链接在图片上的可读性，保留原有所有缩放相关CSS规则，确保悬停缩放效果不丢失。

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