How can I make my CSS text captions fade in and fade out?

Question

I have been trying to make an image map with HTML and CSS where the user rolls over a certain part of an image and a text caption pops up. I think i am nearly there but i would like the text caption to fade in and fade out instead of just appearing and disappearing. Could any one point me in the right direction please? Here is the code i have so far:

#map {
  margin: 0;
  padding: 0;
  width: 400px;
  height: 250px;
  background: #000;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 10pt;
  font-weight: 700;
  line-height: 18px;
}
#map h1 {
  margin: 0px;
  padding-bottom: 5px;
  color: #fff;
  font-size: 12pt;
  font-weight: 700;
}
#map li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#map li a {
  position: absolute;
  display: block;
  background: url(images/blank.gif);
  text-decoration: none;
  color: #ed4e6e;


}
#map li a span {
  display: none;

}
#map li a:hover span {
  position: relative;
  display: block;
  width: 200px;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;

}
#map a.caption1 {
  top: 80px;  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption2 {
  top: 80px;
  left: 190px;
  width: 10px;
  height: 10px;
  background: #ff0035;

}
#map a.caption3 {
  top: 180px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption4 {
  top: 170px;
  left: 250px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption5 {
  top: 90px;
  left: 365px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}

<ul id="map">
  <li><a class="caption1" href="#" title=""><span>
    <h1>Caption 1</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span></a></li>
  <li><a class="caption2" href="#" title=""><span>
    <h1>Caption 2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption3" href="#" title=""><span>
    <h1>Caption 3</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption4" href="#" title=""><span>
    <h1>Caption 4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption5" href="#" title=""><span>
    <h1>Caption 5</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
</ul>

CSS animations are your friend here. http://stackoverflow.com/questions/8449933/animation-css3-display-opacity — DBS, Nov 21 '16 at 11:09
http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Mohd Abdul Mujib, Nov 21 '16 at 11:26

score 2 · Answer 1 · answered Nov 21 '16 at 11:30

You can change your current css into this

#map li a span {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#map li a:hover span {
  position: relative;
  width: 200px;
  display: block;
  z-index: 10;
  visibility: visible;
  opacity: 1;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;
}

Fiddle: http://codepen.io/hunzaboy/pen/mOWOqa

How can I make my CSS text captions fade in and fade out?

1 Answers1