Wordpress文章页图片悬浮效果-追梦人

温馨提示：本文最后更新于2025-08-05 09:54:58，某些文章具有时效性，若有错误或已失效，请在下方留言！

AI智能摘要

阿蛮君博客分享了为WordPress文章页图片添加悬浮效果的CSS代码，通过设置过渡动画和悬停位移实现。代码针对.post-content-content类中的图片元素，添加了10px的上移效果和阴影，同时建议根据主题调整类名，若无需图片与文字间距可删除margin属性。

— 此摘要由AI分析文章内容生成，仅供参考。

本文转自阿蛮君博客 WordPress 主题美化 - 文章页图片悬浮效果 - 阿蛮君博客 (amjun.com)

要让图片悬浮，添加如下 css 即可。因为阿蛮君觉得图片具体文字太近，加了一个 margin 属性，不需要的可以去掉。

/*文章图片悬浮效果*/
/*注意.post-content-content类的名称，不同的主题有可能是不同的类名*/

.post-content-content img {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    margin: 10px 0;
}
.post-content-content img:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    box-shadow:5px 5px 10px gray;   
}

本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:dream@dreamren.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。