Closed emilykdewitt closed 5 years ago
👍
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>
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