css - 添加带有图像的悬停效果(wordpress)

Question

将图像透明度 - 悬停效果添加到 wordpress 的最佳解决方案是什么？我有一些公司 Logo ，我希望它们在您将鼠标悬停在它们上方之前逐渐消失……有简单的解决方案吗？正在寻找正确的代码和 CSS...非常感谢。

Answer 1

首先像这样为所有公司 Logo 图像定义一个类 -

<img class="company-logo" src="..."/>

然后像这样为公司 Logo 类添加 CSS -

img.company-logo {
    opacity: 0.5; /* Set this to whatever value you want */
    filter: alpha(opacity=50);
}

img.company-logo:hover {
    opacity: 1; /* make the images fully opaque */
    filter: alpha(opacity=100);
}