要实现背景滤镜影响子元素的不透明度过渡效果，可以使用CSS的动画和伪元素来实现。以下是一个示例代码：

HTML:

  
  

    
标题
    
内容...
  

CSS:

.container {
  position: relative;
  display: inline-block;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1;
}

.container:hover::before {
  opacity: 1;
}

.content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  padding: 20px;
}

上述代码中，我们使用了一个伪元素 ::before 来添加背景滤镜效果。通过设置 background 属性为渐变色，可以创建一个从半透明到不透明的背景层。初始时，将 opacity 属性设置为0，通过 transition 属性添加了一个过渡效果。当鼠标悬停在容器上时，将 opacity 属性设置为1，从而实现了背景层的不透明度过渡效果。

在 .container 类中设置了 position: relative，使得伪元素能够相对于容器进行定位。.content 类用于设置内容的样式，使用了一个较高的 z-index 值，使其位于伪元素之上。

请注意，上述代码中的背景图片路径需要根据实际情况进行替换。