分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress实现鼠标移动到文章内图片时图片虚化
+

WordPress实现鼠标移动到文章内图片时图片虚化

WordPress实现鼠标移动到文章内图片时图片虚化-BanYuner

这个功能貌似很多主题目前都在使用,虚化图片什么的我个人觉得没有必要,毕竟图片就是给人看的,但是有些人还是比较喜欢这种感觉,那么如果你喜欢或者说需要的话,可以考虑添加进去。

代码方面非常简单,我相信老手基本不会觉得困难,小白的话,你可以考虑百度一下相关代码属性是什么意思:

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

上面的代码就是当鼠标移动到图片上面的时候呢,图片会以60%的透明度显示,那么有些人困难需要一种功能,就是图片默认是虚化的,移动到上面的时候就是完全不虚化的那种感觉,没问题,下面的代码可以帮你解决这个问题:

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

其中的.post根据不同主题,可能类也不一样,大家根据具体情况来自定义。更多效果可以查看本站相关文章:WordPress通过CSS3添加图片效果

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress实现鼠标移动到文章内图片时图片虚化
支付宝(点击图片切换)
扫码,支持我
WordPress实现鼠标移动到文章内图片时图片虚化
微信(点击图片切换)
扫码,手机看
WordPress实现鼠标移动到文章内图片时图片虚化
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress修改默认的头像图标

    WordPress修改默认的头像图标

    随着越来越多人使用WordPress,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • 帅气小琦琦
  • 闲鱼
WordPress实现鼠标移动到文章内图片时图片虚化
2 + 7 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 1楼
    闲鱼
    有点提示选择的意义,总要有那么一点特效网站才显得高大上..... :razz:
    闲鱼 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信 4个月前 (10-06)回复
    • 帅气小琦琦
      @闲鱼 好吧 原来你是这么想的 我之前也使用了 但是觉得没有什么效果
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 4个月前 (10-06)回复