导读：当网页中需要实现鼠标移到某张图片，会有其他文字/图片替换当前图片的效果时，很多人会使用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设置一个高度(这里我之所以把高度设置在了内嵌样式中，是为了在别处使用此效果时，高度不一样的话，可以手动调整，不用动样式表了)，超出高度部分隐藏显示，我还给.yiru1设置了一个宽度600，其实在正常的网页中，应该是已经有了外层的宽度，所以正常应用中根据情况看是否需要设置宽度。然后设置其相对定位。这部分是最开始显示的样子。
之后要替换它的文字/图片层设置为绝对定位，这里我用文字层做一下讲解。
宽高都要设为100%，这样才能完全覆盖掉背景图片，然后bottom: -100%;就是要把文字最开始的时候放在背景图片的下面，我们可以看到其实文字层是在背景图层里面的，但是因为设置了高度和超出隐藏，所以文字层其实是被隐藏了。文字层的位置其实是在这里的：
然后鼠标移到背景层的位置时，只要让文字往上移动100%的高度就可以了，也就是transform:translateY(-100%);它和transition:transform 1.5s;是搭配使用的，意思是往y轴的上方移动100%的高度，移动的过渡时间为1.5s。关于这个样式的具体用法，大家可以自行搜索。
这里为了让文字能显示的清楚，又给文字层加了一层透明度为0.7的黑色背景，然后让文字的内边距为30px，这样显示出来就很好看了。
怎么样？觉得用css3实现鼠标移入后显示文字/图片的效果是不是特别简单，完全没有用到jQuery的效果。
如果觉得《html鼠标划到背景图显示文字 用css3实现鼠标移入图片后显示其他文字/图片的效果...》对你有帮助，请点赞、收藏，并留下你的观点哦！
