首页 > 网站建设 > 用css3实现鼠标移入图片后显示其他文字/图片的效果

用css3实现鼠标移入图片后显示其他文字/图片的效果

来源:思维小站 2018-06-15 11:22:32

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

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

html语句:

<div class="yiru1" style="background: url(/201727144153616.jpg) no-repeat; height: 350px;">

<div class="yiru2">鼠标移入后显示的文字</div>

</div>

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,其实在正常的网页中,应该是已经有了外层的宽度,所以正常应用中根据情况看是否需要设置宽度。然后设置其相对定位。这部分是最开始显示的样子。

css3移入效果演示图

之后要替换它的文字/图片层设置为绝对定位,这里我用文字层做一下讲解。

宽高都要设为100%,这样才能完全覆盖掉背景图片,然后bottom: -100%;就是要把文字最开始的时候放在背景图片的下面,我们可以看到其实文字层是在背景图层里面的,但是因为设置了高度和超出隐藏,所以文字层其实是被隐藏了。文字层的位置其实是在这里的:

css3移入效果演示图

然后鼠标移到背景层的位置时,只要让文字往上移动100%的高度就可以了,也就是transform: translateY(-100%);它和transition:transform 1.5s;是搭配使用的,意思是往y轴的上方移动100%的高度,移动的过渡时间为1.5s。关于这个样式的具体用法,大家可以自行搜索。

这里为了让文字能显示的清楚,又给文字层加了一层透明度为0.7的黑色背景,然后让文字的内边距为30px,这样显示出来就很好看了。

css3移入效果演示图

怎么样?觉得用css3实现鼠标移入后显示文字/图片的效果是不是特别简单,完全没有用到jQuery的效果。

如文章对您有帮助,别忘了点赞哟!有业务合作也欢迎联系站长 ,验证信息请说明。

点赞()

共有条评论


验证码:
匿名发表

上一篇:网站建设案例:啄木鸟大师响应式布局网站

下一篇:网站seo内链不可少!利用帝国cms关键字替换功能完成文章自动加内链

相关文章

    无相关信息

思维小站 (www.lidongyan.com)—从事网站运营10年的女技术员的个人博客 联系站长
鲁ICP备13011159号-2 xml地图