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

Question

I am brand new to coding.

I am trying to get text to appear when the user rolls over an image, like these images here: http://www.enthusiastic.co/

So far I have this:

#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>

I know it has something to do with the span tag but I can't figure it out. Any help would be much appreciated. Thanks.

Answer 1

What you need is to set the :hover action to the a tag and also use absolute position for the span. Check this:

#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>