仅用css来做一个动画效果，鼠标移入画面向上移动

用户需求：正常情况时，文字介绍停留在图片底部，当鼠标移入图片时，文字及其背景向上滑动文字居中背景色充满，截图如下




效果网址：http://103.233.7.23:8090/chengXinWeb/#/credible/index

css：

.right-second-col {
  float: left;
  width: 100%;
  height: 138px;
}
.right-second-col img {
  float: left;
  width: 100%;
  height: 138px;
}
.right-second-col-title {
  float: left;
  width: 100%;
  margin-top: -28px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background-color: rgba(222, 134, 57, 0.8);
  transition: 0.3s;
  color: #fff;
}
.right-second-col:hover .right-second-col-title {
  float: left;
  width: 100%;
  margin-top: -138px;
  height: 138px;
  line-height: 138px;
  transition: 0.3s;
  font-size: 18px;


}

最关键的是最下面那行，是借助设置文字的高度然后用margin-top负值来控制

• « 上一篇：使用 OpenSSL 创建私有 CA：3 用户证书
• » 下一篇：网络爬虫-pyqt5绕过反爬服务