时间戳

首页 > 解决方案 > 使用带跨度的过渡？

html - 使用带跨度的过渡？

问题描述

当我将鼠标放在图像上时，我试图显示居中的文本。我找到了一种使用 Span 的方法，但是过渡不起作用。有人可以帮我吗？是否有其他方法可以制作“过度居中的 txt”？

这是代码：

body {
  margin: 0;
  padding: 0px;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000000;
  ;
  text-align: center;
}

#content {
  padding-top: 71px;
  transition-duration: 1s;
}

#content a {
  width: 800px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: 1s
}

#content a img {
  border: none;
  width: 100%;
  transition: 1s
}

#content a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#content a:hover span {
  display: block;
}

#content span.title {
  display: none;
  color: #FFF;
  font-weight: bold;
  font-size: 1.2em;
  z-index: 2;
  transition: 1s;
}

#content span.bg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  background: black;
  transition: 1s;
  opacity: 0.5;
}
<div id="content">
  <a href="#">
    <span class="title">Mon titre</span>
    <span class="bg"></span>
    <img src="B 1.jpg" alt="" />
  </a>

</div>
<div id="footer">

</div>

这是我使用的示例的来源

标签： htmlcss

解决方案

据我所知，您不能在显示属性上使用过渡。为什么你不使用不透明度来代替？做这样的事情

#content a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity : 0;
transition : opacity 1s ease-in-out;
}

#content a:hover span {
opacity:1;
}

并删除其他显示和过渡。

推荐阅读