图片 hover 效果
.img {width: 100%;height: 100%;background-image: url("../../../styles/image/example.png");background-repeat: no-repeat;background-size: 100% auto;background-position: 50% 100%;transition: all 0.2s ease 0s; // 2. 动画效果 重点：当有css样式有变化时都可以使用此效果进行一个缓冲，增加柔和型-webkit-transition: all 0.2s ease 0s;&:hover {transform: scale(1.1); // 1. hover 放大}}
图片覆盖层
> img {display: inline-block;max-width: 100%;max-height: 100%;}> div {width: 194px;height: 60px;background: rgba(31, 31, 31, 0.56);position: absolute;bottom: -60px; // 1. 定位left: 0;transition: transform 0.3s;transform: translateY(60px); // 2. 竖直方向上 向下移动color: rgba(255, 255, 255, 1);font-size: 12px;text-align: center;line-height: 60px;}&:hover {> div {transform: translateY(-60px); // 3. 竖直方向上 向上移动transition: transform 0.3s;}}
盒子 hover 效果
&:hover {margin-top: 8px; // 1. 比之前的 margin-top 设置的 小写，形成向上偏移的效果box-shadow: 0px 4px 7px 3px rgba(124, 124, 124, 0.3); // 2. 盒子的阴影效果}
设置一个渐变背景
.imgDisDiv {width: 100%;height: 34px;position: absolute;bottom: 0;right: 0;background: linear-gradient(0deg,rgba(89, 89, 89, 0.9) 0%,rgba(216, 216, 216, 0) 100%); // 1. 线性渐变opacity: 0.82; // 2. 透明度.imgDis {font-size: 16px;color: #fff;margin-left: 14px;line-height: 34px;}}
