Question

我试图将鼠标悬停在顶部的图片上。除了文本不滑动这一事实外，一切似乎都有效。动画立即发生。有没有办法让文本滑动而不编码jQuery？我对-webkit-transitions不太熟悉，但我最终使用了很多代码。

网格HTML第1列：

<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小提琴：

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

Answer 1

这是我刚刚创建的一个例子，可能会提供帮助

http://jsfiddle.net/jagmitg/qp67k62d/

使用不是DIV的列表项

修改

添加动画，从左向右滑动

http://jsfiddle.net/jagmitg/6ncoh1on/

Answer 2

我也为你做了一个例子，我将解释：

将您想要的图像放入div中。这个div有一个溢出：隐藏;

之后，您还可以使用标记在此div中添加一些文本。（例如）设置文本的边距为负值，以便它不会在＆＃39; wrapper-div＆＃39;中显示。

现在，在CSS中添加：悬停为具有正左边距的图像包装div。通过使用CSS过渡，文本将被设置为动画＆＃34;。

这里有一些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对你来说！：）

如何仅使用css / html进行文本幻灯片

2 个答案: