滚动图像时如何显示文本？

Question

我是编码的新手。

我试图在用户滚动图片时显示文字，如下图所示：http://www.enthusiastic.co/

到目前为止，我有这个：

#imagelist {
  font-size: 0;
}
#imagelist a {
  margin: 5px;
  display: inline-block;
  background: #000;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
#imagelist img {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: 400px;
  height: 300px;
  o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#imagelist img:hover {
  opacity: .2;
  width: 400px;
  height: 300px;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
#imagelist span {
  display: none;
  font-size: 13px;
  color: red;
}
#imagelist span:hover {
  display: block;
}

<div id="imagelist">
  <a href="https://google.com" target="_blank">
    <img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
    <span>View</span>
  </a>
</div>

我知道它与span标签有关但我无法弄明白。任何帮助将非常感激。感谢。

Answer 1

您需要将:hover操作设置为a标记，并使用absolute位置span。检查一下：

#imagelist {
  font-size: 0;
}
#imagelist a {
  margin: 5px;
  display: inline-block;
  background: #000;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position:relative;
}
#imagelist img {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: 400px;
  height: 300px;
  o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#imagelist a:hover img{
  opacity: .7;
  width: 400px;
  height: 300px;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
#imagelist span {
  display: none;
  font-size: 23px;
  color: red;
  line-height:300px;
  text-align:center;
  position:absolute;
  top:0;left:0;
  width:100%;
}
#imagelist a:hover span{
  display: block;
}

<div id="imagelist">
  <a href="https://google.com" target="_blank">
    <img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
    <span>View</span>
  </a>
</div>

Answer 2

这是一个关于bootply的简单代码：

http://www.bootply.com/90238

它使用bootstraps本机功能以及这一小部分JS

    $("[rel='tooltip']").tooltip();    

    $('.thumbnail').hover(
    function(){
        $(this).find('.caption').slideDown(250); //.fadeIn(250)
    },
    function(){
        $(this).find('.caption').slideUp(250); //.fadeOut(205)
    }
    );