html图片向上移动top,仅用css来做一个动画效果，鼠标移入画面向上移动

鼠标移入画面向上移动"/>

html图片向上移动top,仅用css来做一个动画效果，鼠标移入画面向上移动

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

发布时间：2018-05-28 14:48,

浏览次数：444

, 标签：

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负值来控制