css 如何使文本过渡到一个模糊的图像悬停？

5lhxktic 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(163)

https://stackblitz.com/edit/react-jajyvc?file=src/circle.css
我试着让图像模糊，文字在悬停时平滑地出现，然后当你停止悬停时，文字平滑地淡出，图像恢复模糊。我感觉我离你很近了。
你看到在stackblitz的例子中，文本在悬停时平滑地出现，但是它是模糊的，当你停止悬停时，过渡效果结束得太快，文本在一瞬间变得不模糊了吗？
无论我如何设置过渡时间，或者改变过渡属性，这种情况都会发生。我试图让它看起来更平滑、更专业。我如何消除文本上的模糊，同时保持过渡的进出？
我试过直接在文本上将模糊设置为0，但是不起作用。

#site-circle:hover #circle-title {
    -webkit-opacity: 1;
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);

然后我想可能是模糊“覆盖”它，所以我设置了一个z指数为999，但这也不起作用。
你知道我错过了什么或者该怎么办吗？帮忙？
如果不想点击StackBlitz，请输入代码
x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/75081437/how-to-make-text-transition-over-a-blurred-image-on-hover

1条答案

按热度按时间

icnyk63a1#

你应该把#circle-title从<a>中取出，然后用position: absolute;把它放在图像上!当模糊父元素时，子元素也会自动模糊，所以在中你不能用这个html来真正地去模糊文本

#link-container {
  position: relative;
  width: fit-content;
}

#link-container a {
  display: inline-block;
  background: url("https://i.ibb.co/Sd6kP7T/Screenshot-155.png");
  background-position: top;
  text-decoration: none;
  width: 160px;
  height: 160px;
  background-size: cover;
  border-radius: 50%;
}

#link-container #circle-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 21px;
  color: #dbe8d4;
  font-family: "Josefin Sans", sans-serif;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

#link-container:hover a {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  transform: scale(1.03);
}

#link-container:hover #circle-title {
  -webkit-opacity: 1;
  opacity: 1;
}

<div id="link-container">
  <a href="#" rel="noopener noreferrer"></a>
  <div id="circle-title">TEXT</div>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何使文本过渡到一个模糊的图像悬停？

1条答案

相关问题

热门标签

最新问答