?HTML部分:

?css部分:?

.smallbox {width: 100%;.card {position: relative;top: 0;left: 0;width: 224px;height: 302px;margin-right: 70px;overflow: hidden;img {width: 224px;height: 302px;margin-right: 70px;}.message {position: absolute;// bottom: 0;left: 0;right: 0;top: 0;transition: all 1s;transform: translateY(100%);width: 224px;height: 302px;img {width: 224px;height: 302px;margin-right: 70px;}}&:hover .message {position: absolute;bottom: 0;left: 0;right: 0;top: 0;transform: translateY(-0px);}}}

總結(jié)

以上是生活随笔為你收集整理的鼠标悬停 显示遮罩层的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。