如何在不“破坏”动画/效果的情况下添加指向此图库中扩展图像的链接？

编程问答 2022-05-18

问题描述

我正在尝试使用链接的 codepen 片段模仿投资组合类别页面。我想添加指向图像或至少每个框的链接，但我在任何地方都放置了相应的 href 元素和结束标记，它以一种或另一种方式破坏了图库。

我应该在哪里放置标签以单独链接 4 个部分？

https://codepen.io/knyttneve/pen/YgZbLO

  HTML:
    <div class="container">
  <div class="box">
    <img src="https://source.unsplash.com/1000x800">
    <span>CSS</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x802">
    <span>Image</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x804">
    <span>Hover</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x806">
    <span>Effect</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,.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 50%; }
.box:hover > img {
  width: 100%;
  height: 100%;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

hoverhtmlimage-galleryportfolio