将鼠标悬停时淡入淡出添加到图像

时间:2020-07-24 作者:baksudin

我是一名教师,多年来一直在使用blogger,但几天前,我决定改用WP,并选择了premium计划。我不是一个设计师,但我能做一些基本的事情(为博客主题添加自定义css,或在博客帖子中更改html),我一直在想,是否有一种方法可以只使用css或html为鼠标盖上的图像添加淡入淡出效果,而无需安装任何插件?(例如,仅适用于砌块和特定图像)

谢谢

2 个回复
SO网友:Sergei

您可以在样式中应用css。css或主题。主题文件夹中的css。还有许多主题允许在主题选项或自定义部分添加css。您可以在图片悬停处检查css。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity

SO网友:baksudin

非常感谢。我使用了以下代码-灰色悬停:img{-webkit filter:灰度(0%);/*用于webkit浏览器//-webkit转换:.5s ease-in-out;//em>用于webkit浏览器//-moz filter:灰度(0%);//em>用于Firefox//-moz转换:.5s ease-in-out;//em>用于Firefox*/-o-filter:灰度(0%);-o-transition:.5s ease-in-out;}

img:悬停{-webkit过滤器:灰度(100%);/*对于webkit浏览器,webkit转换:.5s ease-in-out;/对于webkit浏览器,moz过滤器:灰度(100%);/对于Firefox,moz转换:.5s ease-in-out;/对于Firefox,o-filter:灰度(100%);-o-transition:.5s ease-in-out;}

相关推荐

WP Large Images crash page

我遇到了一个问题,照片库中最宽的一面有多个7MB、4000px的图像,导致wordpress页面崩溃,或者页面变得没有响应。我使用smush调整图像大小。除了较小的图像,还有其他想法吗?还是更少的图像?