html - 使用 css transition 滑动效果 - div 在幻灯片之前显示

Question

我希望以前没有人问过这个问题，但我在网上搜索并没有找到答案。

我正在尝试在图像上滑动。互联网上有很多例子，但它们似乎不适合我。幻灯片有效，但滑动 div 显示在目标图像之前和之外。

这是我的代码:

   div.details {
     position: absolute;
     left: -250px;
     top: 0px;
     width: 240px;
     height: 170px;
     overflow: hidden;
     margin: 0px;
     padding: 5px;
     opacity: 0.7;
     background-color: grey;
     color: white;
     transition: all .5s;
     display: block;
     transition: all 0.5s;
     -webkit-transition: all .5s;
   }
   div.project:hover div.details,
   div.project-nl:hover div.details {
     left: 0px;
   }

<div class="project">
  <a class="fancybox" href="/index.php/assets/Uploads/th2.jpeg">
    <img src="/index.php/assets/Uploads/_resampled/SetSize250180-th2.jpeg" alt="Project2" />
    <div class="details">
      <h2 class="ptitle">Project2</h2>
      <p>Nullam suscipit diam et leo malesuada finibus. Pellentesque hendrerit porta sodales. Suspendisse volutpat eros sapien, et ullamcorper orci condimentum vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Maecenas auctor auctor.
      </p>
    </div>
  </a>
</div>

这就是我在网上找到它的方式，在那里它工作正常，只是，当我尝试它时，滑动 div 一直可见。有没有办法隐藏div，并在它进入图像时显示它？我试过 display:none，但是 div 就出现了，没有滑动效果。

如有任何帮助，我们将不胜感激。

Answer 1

刚刚发布，现在我得到了答案。我必须在包含 (div class=project) 的 div 上设置 overflow:hidden;。