CSS转换不透明度在手机上不起作用

我正在使用这个网站的一个代码：制作一个带有过渡的图像网格，当你触摸或移动它时，它会显示一些文本。这种过渡在PC上运行良好，但当我在手机上测试时，我得到了图片上的不透明颜色。我在Safari、Chrome和Edge中进行了测试，但都不起作用

正文{
填充：20px；
字体系列：无衬线；
背景#f2f2；
}
img{
宽度：100%；
/*需要覆盖内联维度吗*/
高度：自动；
}
氢{
边缘底部：.5em；
}
.网格容器{
显示：网格；
网格模板列：重复（自动填充，最小值（300px，1fr））；
网格间距：1米；
}
/*悬停样式*/
.地点清单{
位置：相对位置；
}
.位置图像{
线高：0；
溢出：隐藏；
}
.位置图像img{
过滤器：模糊（0px）；
过渡：过滤器0.3s容易进入；
转换：比例（1.1）；
}
.地点名称{
字号：1.5em；
字体大小：粗体；
文字装饰：无；
z指数：1；
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
不透明度：0；
转变：不透明度。5s；
背景：rgba（90,0,10,0.4）；
颜色：白色；
/*将文本放置在t'中间*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.位置列表：悬停.位置标题{
不透明度：1；
}
.location列表：hover.location图像img{
过滤器：模糊（2px）；
}
/*用于触摸屏设备*/
@媒体（悬停：无）{
.地点名称{
不透明度：1；
}
.位置图像img{
过滤器：模糊（2px）；
}
}

我们的位置

由于移动浏览器中没有悬停效果（没有鼠标光标在图像上移动/悬停），因此在移动/触摸屏设备上无法获得相同的行为

---

CSS末尾的媒体查询将样式应用于所有“.location title”元素，并将模糊应用于所有“.location image img”元素。无论用户是否与这些元素交互，这些效果都将应用于这些元素。我想在这个示例中说，如果浏览器中没有悬停功能，使用@media查询为元素指定样式，这是一种可以接受的回退行为。如果您希望更像移动设备上的桌面行为（例如，应用于触摸事件中活动元素的CSS规则），您的特定解决方案可能需要不同的方法。

我在android上的Chrome上对其进行了测试。它工作得很好。看到了转变。