Research - hover status or eventListener to make employee info appear

[emilykdewitt]

User Story

As a developer, I need to know how to create a hover-over feature that causes the employee info to appear over the employee photo when the user hovers over the photo. The background color of the info should be transparent so I can read the text, but still see the employee photo behind it. When I move away from the photo, the text should disappear.

Acceptance Criteria

WHEN I open this issue THEN I will see documentation in the comments below on how to create this hover feature

Development

• Research and find examples of this feature and, if necessary, change the naming conventions on issue cards to match what this functionality is actually called

[zoeames]

👍

[emilykdewitt]

Example:

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

[emilykdewitt]

https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering