Text over Image

shows text when hover over image

by Steve Hutton

HTML

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/100/100/cats/">
  </div>
  <div class="colleague-text">
    <div class="colleague-name">Mr Big </div>
    <div class="colleague-job-title">The Boss </div>
    <div class="colleague-qualifications">Top Cat</div>
  </div>
</div>

CSS

#Profile-Picture {
  position: relative;
}

.colleague-text {
  position: absolute;
  top: 10px;
  left: 20px;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}