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

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 标签，并为 span 使用 absolute 位置。检查这个：

#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)
    }
    );

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

How do I get text to appear when rolling over image?

css

image

text

rollover