纯css hover图片能划过遮罩层变动画效果吗？

要用纯CSS实现在图片上hover时显示疑问标题的动画效果，你需要创建一个包含图片和遮罩层的容器。当鼠标悬停在图片上时，遮罩层滑过图片，并显示疑问标题。以下是实现这个效果的HTML和CSS代码示例：

HTML:

<div class="image-container">
    <img src="your-image-url.jpg" alt="示例图片">
    <div class="overlay">
        <span class="question-title">你的疑问标题?</span>
    </div>
</div>

CSS:

.image-container {
    position: relative;
    width: 300px;  /* 根据需要调整尺寸 */
    height: 200px; /* 根据需要调整尺寸 */
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 100%; /* 初始化位置在容器外 */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.5s ease; /* 平滑过渡效果 */
}

.question-title {
    color: white; /* 白色字体 */
    font-size: 20px; /* 字体大小 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-container:hover .overlay {
    left: 0; /* 悬停时，遮罩层滑入 */
}

.image-container:hover .question-title {
    opacity: 1; /* 悬停时，标题淡入 */
}

在这个示例中，.image-container 是包含图片和遮罩层的容器。遮罩层 .overlay 初始状态在容器外，当鼠标悬停在 .image-container 上时，.overlay 滑入，并显示疑问标题 .question-title。记得将 your-image-url.jpg 替换成你想要的图片URL。