使用弹出式效果将文本的不透明度从 0 更改为 1

Posted 2023-03-06

【中文标题】使用弹出式效果将文本的不透明度从 0 更改为 1

【英文标题】：Change opacity of text from 0 to 1 with popup like effect

【发布时间】：2017-08-07 02:56:36

【问题描述】：

我想创建一个像 freepik.com 这样的简单文本动画。当我们将鼠标悬停在 freepik 中的任何图像上时，它的标题将其不透明度从 0 更改为 1，有点像弹出窗口。只需在Freepik.com 处查看此转换即可。首页上有一些图像将鼠标悬停在它们上方，您会看到像弹出窗口一样的文本视图。我只想创建这个过渡而不是别的。帮帮我谢谢。

【问题讨论】：

那是覆盖。检查这个w3schools.com/howto/howto_css_image_overlay.asp

我不想要一个覆盖。我已经创建了叠加层。如果您访问 freepik.com。当您将鼠标悬停在图像上时，它不仅仅是从 0 到 1 的动画。它看起来像是从中心出现的。我想创造这种效果。

【参考方案1】：

这就是 freepik.com 的做法：

弹出

-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);

到:hover

webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);

---

不透明度

opacity: 0;

到:hover

opacity: 1;

---

动画

-webkit-transition: 250ms ease;
-moz-transition: 250ms ease;
-o-transition: 250ms ease;
transition: 250ms ease;

应用到您要设置动画的所有元素，但确保它不仅仅应用到 :hover 状态。

---

您可以在屏幕截图中看到他们网站上的代码：

【讨论】：

感谢您的帮助

【参考方案2】：

我已经为你写了一个例子here

它的工作方式是它使用transition: transform 1s; 使其缓慢而平稳地过渡，它使用transform: rotateY(90deg); 使其开始隐藏，方法是使其以直角转动使其几乎平坦，然后在内部使用transform: rotateY(0deg); .popout-div:hover p，当您将鼠标悬停在 div 上并选择其中的所有 p 元素时，它会以弹出方式重新出现。

【参考方案3】：

您可以尝试类似的方法 - 过渡不透明度和悬停时缩放。

.container
  position: relative;
    width: 150px;
    height: 150px;
  cursor: pointer;
  overflow: hidden;


.container img
  width: 100%;
  height: 100%;


.details
  position: absolute;
  background: rgba(255,255,255, .5);
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  text-align: center;
  transform: scale(0.3,0.3);
  opacity: 0;
  transition: all .2s ease-in-out;


.container:hover .details
  transform: scale(1,1);
  opacity: 1;

<div class="container">
<img src="http://adrianweb.net/includes/images/service-webdev.jpg" />
  
<div class="details">
Details going up  
</div>
</div>

但 Freepik.com 可能必须将第一列从中心到左分开，另一列从中心到右。