html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...

导读：当网页中需要实现鼠标移到某张图片，会有其他文字/图片替换当前图片的效果时，很多人会使用jQuery的效果，其实用css3就可以实现，而且很简单，下面列一下代码：主要用到的是position定位和transform: translate3d转换、transition过渡效果。

当网页中需要实现鼠标移到某张图片，会有其他文字/图片替换当前图片的效果时，很多人会使用jQuery的效果，其实用css3就可以实现，而且很简单，下面列一下代码：

html语句：

鼠标移入后显示的文字

css语句：

.yiru1{width: 600px;height: 100%;position:relative; overflow: hidden;}

.yiru2{position: absolute;width: 100%;height: 100%;bottom: -100%;transition:transform 1.5s; box-sizing: border-box;padding: 30px;}

.yiru1:hover .yiru2{transform: translateY(-100%);background-color:#000 ; opacity: 0.7;padding: 30px;}

是不是很简单，这里是把图片设置成了背景，记住一定要给背景图片所在div设置一个高度(这里我之所以把高度设置在了内嵌样式中，是为了在别处使用此效果时，高度不一样的话&#