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，只是在它进入图像时显示它？我尝试显示：none，但然后只显示div，没有幻灯片效果。

任何帮助都会被贬低。

Answer 1

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

使用css过渡滑过效果 - 在幻灯片前显示div

1 个答案: