Question

将鼠标悬停在模糊栏上并触发过渡会导致h1向下移动

我不知道从哪里开始，所以我没有尝试修复它，值得一提。

HTML

<body>
  <div id="people">
    <div class="blurbar">
      <a href="#">
                        <img class="blurbar" src="https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg">
                    </a>
      <div class="imgtext">
        <h1>Lorem Ipsum</h1>
      </div>
</body>

CSS

.blurbar {
  width: 75vw;
  height: 25vh;
  margin: 25px auto;
  overflow: hidden;
  filter: grayscale(100%);
  transition: filter 0.5s linear;
}

.blurbar:hover {
  filter: none;
}

.blurbar img {
  margin: 0px;
}

.imgtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: none;

“ Lorem Ipsum” H1元素应该保留在图像上，而不是在图像下方移动。

其他信息-如果仅将鼠标悬停在标题而不是图像上，则标题似乎是独立起作用的，没有图像的过渡。我不确定这是否是相关信息。

Fiddle

为什么“ filter”属性的转换会导致我的h1移动？

0 个答案: