分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点已经开通最新消息功能,请随时关注~
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress实现鼠标移动到文章内图片时图片虚化
+

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

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

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

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

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

.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纯代码实现文章AJAX点赞

    WordPress纯代码实现文章AJAX点赞

    这个功能其实在很多主题中都集成进去了,DUX默认的主题里面也是有这个功能的,但是我将其删除了,之后换上了评星插件了,评 ...

    点击查看
  • WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能 文章分类目录和标签功能是WordPress自带的功能,但是很多时候,喜欢使用页面的用 ...

    点击查看
  • 如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频 现在很多站点都是做视频站点的,同时也有很多视频站点都是使用的CK播放器,如果你已经使用了 ...

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