html - 如何仅使用 css/html 使文本滑动

Question

当您将鼠标悬停在图片上时，我试图让标题从顶部滑入图片。除了文本不滑动之外，一切似乎都有效。动画立即发生。有没有办法在不编写 jQuery 代码的情况下使文本滑动？我对 -webkit-transitions 不太熟悉，但我最终在这段代码中使用了很多。

HTML 网格的第一列:

<div class="col-md-4">
  <a href="#" class="darken">
    <h3 class="pictureCaption">Click Me!</h3>
    <img class="img-responsive" src="http://placehold.it/300x300">
  </a>
  <a href="#" class="darken">
    <h3 class="pictureCaption">Click Me!</h3>
    <img class="img-responsive" src="http://placehold.it/300x300">
  </a>
</div><!-- end col-md-4 -->

CSS:

/*-------------------------------
      Picture Gallery
---------------------------------*/
#pictureGallery .row .col-md-4 {
    text-align: center;
}

#pictureGallery .row .col-md-4 .darken {
    display: inline-block;
    background: black;
    padding: 0px;
    margin-top: 10px;
}

#pictureGallery .row .col-md-4 .darken img {
    display: block;
    padding: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#pictureGallery .row .col-md-4 .darken:hover img {
    opacity: 0.7;
}

 .pictureCaption {
    position: absolute;
    margin-left: 100px;
    margin-top: -40px;
    color: transparent;
    transition: all 2s;
    -webkit-transition: all 2s;
}

#pictureGallery .row .col-md-4 .darken:hover .pictureCaption {
    color: white;
    top: 120px;
}

提前致谢!我是菜鸟..但我从这个网站学到了很多东西!任何提示表示赞赏!

我做了一个 JS fiddle :

http://jsfiddle.net/Veetz/7ec7avrd/

Answer 1

我也给你举个例子，我来解释一下:

把你想要的图片放在一个div中。这个 div 有一个 overflow:hidden;

之后，您还可以使用标签在此 div 中添加一些文本。(例如)将文本的边距设置为负数，这样它就不会在“wrapper-div”中可见。

现在，在 CSS 中为图像包装 div 添加一个 :hover，它具有正的左边距。通过使用 CSS 转换，文本将被“动画化”。

下面是一些 CSS 示例:

.image-wrapper{
    width:400px;
    height:439px;
    overflow:hidden;
    transition:left 2s ease-in-out;
    -webkit-transition:left 2s ease-in-out;
}

.image-wrapper img{
    width:100%;
}

.image-wrapper a{
    position:relative;
    font-size:24px;
    color:red;
    font-weight:600;
    left:-180px;
    bottom:60px;
    -webkit-transition:left 1s ease-in-out;
}

.image-wrapper:hover > a{
    left:120px;
}

还有一个 jsFiddle example为你! :)