Question

我在项目的中间，我使用过渡属性来延迟滤镜模糊。由于某些原因，计时功能不起作用。可能是什么原因？这是我的代码：

.project-tile img {
    max-width: 100%;
    max-height: auto;
    filter: blur(1px);
    -webkit-filter: blur(1px);
    transition: all 500ms linear;
}

.project-tile img:hover {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    transition: all 500ms linear;
}

HTML：

<section id="projects">
        <div class="container">
            <div class="projects-text">
                <h2>My Recent Work</h2>
                <p>Here are a few recent projects of mine:</p>
            </div>
            <div class="grid-3">
                <div class="project-tile" id="project-tile-1">
                    <img src="images/project-1.png" alt="project">
                    <div class="project-title">Vegan Survey Form</div>
                    <p>This is a survey about vegan diet.</p>
                    <a href="#" class="btn">See Website</a>
                </div>
                <div class="project-tile">
                    <img src="images/project-2.png" alt="project">
                    <div class="project-title">Documentation Page</div>
                    <p>It's a reference page for learning CSS.</p>
                    <a href="#" class="btn">See Website</a>
                </div>
                <div class="project-tile">
                    <img src="images/project-3.png" alt="project">
                    <div class="project-title">Peter the Rabbit</div>
                    <p>It's a landing page for Peter the Rabbit</p>
                    <a href="#" class="btn">See Website</a>
                </div>
            </div>
        </div>
    </section>

Answer 1

.project-tile img {
  max-width: 100%;
  max-height: auto;
  filter: blur(5px);
  transition: filter .5s ease;
}

.project-tile img:hover {
  filter: blur(0px);
}

<div class="project-tile">
  <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" />
</div>

为什么过渡计时功能不起作用？

1 个答案: