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

Question

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

Answer 1

我为你写了一个例子here

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

Answer 2

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状态。

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

Answer 3

您可以尝试这样的事情 - 在悬停时过渡不透明度和缩放。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但Freepik.com可能需要将第一列从中心分离到另一个从中心到右边。