【问题标题】:Wordpress media file - hover on imageWordpress 媒体文件 - 悬停在图像上
【发布时间】:2014-02-20 22:22:58
【问题描述】:

我需要做什么:

我在可视化编辑器中通过媒体上传器将图像添加到 wordpress 帖子中。

在网站上,当悬停在这些图像上时,我希望它为另一个具有黄色背景和不透明度以及“+”符号的图像做悬停效果。

我尝试了很多东西,甚至是“image hover”的旧插件,但都没有奏效。

有没有办法只用 css 做到这一点?没有脚本?如果是 - 如何?

【问题讨论】:

    标签: html css wordpress


    【解决方案1】:

    这是 css,但它也需要一些 html 更改。

    这是一个Fiddle 来验证这是您想要的。

    @import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css');
    
    .size-thumbnail {
        position: relative;
        text-align: center;
        width: 150px;
        height: 150px;
    }
    
    .size-thumbnail:hover:before {
        content: "\f067"; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        color: #000;
        font-size: 50px;
        position: absolute;
        line-height: 150px;
        width: 150px;
        background-color: rgba(255,247,102,0.5);
    }
    

    【讨论】:

    • MMMMM 谢谢...我脑子里有一个小障碍...如何使用 wordpress 在可视化编辑器添加的图像上实现它?
    • 哪些图片,缩略图?
    • 在这里查看 w8 的图像hap.outit.co.il/hap7 它是通过可视化编辑器、媒体上传添加的。
    • 为您的网站更新了小提琴。只需将 css 代码(右上角的框)复制并粘贴到您的 css 文件中,并将 FontAwesome 包含在您的标题中
    • 如果我的代码对你有帮助,请为我选择最佳答案!
    猜你喜欢
    • 2013-10-17
    • 1970-01-01
    • 1970-01-01
    • 2016-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多