Question

您好我正在尝试制作三张图片的拼贴画，例如此网站中显示的概念：https://codepen.io/zacharybrady/pen/aGmFp

HTML：

let navVC = tabBarController.viewControllers[1] as! UINavigationController
let rootVC = navVC.viewControllers[0] as! SomeViewController
rootVC.someData = myData

CSS：

<div class="container">

<div class="diagonal" id="d0">

  <img src="http://www.shortpacked.com/comics/2013-02-08-prologue.png" />
  <p class="overlay">
    TEST
  </p>

  </div>

  <div class="diagonal" id="d1">

  <img src="http://www.questionablecontent.net/comics/2381.png" />
    <p class="overlay">
    TEST
  </p>
  </div>

  <div class="diagonal" id="d2">

  <img src="http://www.shortpacked.com/comics/2005-01-17-bow-before-your-master.gif" />
    <p class="overlay">
    TEST
  </p>
  </div>

  <div class="diagonal" id="d3">

  <img src="http://www.questionablecontent.net/comics/2021.png" />
    <p class="overlay">
    TEST
  </p>
  </div>

  <div class="diagonal" id="d4">

  <img src="http://www.shortpacked.com/comics/2009-03-27-fourohfour.png" />
    <p class="overlay">
    TEST
  </p>
  </div>



</div>

问题：如何添加额外的过渡效果，当特定图像悬停时，它会扩展到整个宽度？

请不要将此标记为重复或因为含有模棱两可的问题而将其标记为副本，因为我知道并且您知道这个问题是明确且可以理解的。

Answer 1

您可以在悬停时更改z轴，以便将完整图像放在前面。

CSS对角线图像重叠在悬停时扩展到全宽

1 个答案: