暑期实训记录：第五周（3）

Hover Effect实现

Hover Effect实现：
/* 菜名信息展示 /
.meal-info {
position: absolute;
top: 0;
left: 0;
height: 180px;
width: 180px;
background: rgba(0, 0, 0, 0.7);
/ flex布局 垂直居中显示 /
display: flex;
align-items: center;
justify-content: center;
/ 过渡效果 /
transition: opacity 0.2s ease-in;
/ 鼠标没有悬停的时候不显示 */
opacity: 0;
}

.meal:hover .meal-info {
opacity: 1;
}