CSS Transition无法正常工作（文字出现在其他地方）

时间：2017-01-05 10:05:16

标签： html css

我拼命想弄明白这一点。我昨天在这里得到了一些人的帮助，我非常感激，而且我到了某个地方，但出于某种原因，我的过渡财产并没有按原样运作。我希望能够将鼠标悬停在人物图像上，如下所示，基础文本（应该在那里）显示在每个人的页面顶部中心。每个人背后都应该有单独的中心文本。

How it works at the moment

HTML 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="meet.css">
    <h1>Meet the Team</h1>
</head>
<body>

<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

<div id="jane" class="info"> 
  <h5>Jane Doe</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

<div id="jane" class="info"> 
  <h5>Jane Doe</h5>

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>


</body>
</html>

CSS 

.info {

  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}

我真的不确定如何让它发挥作用。另外，理想情况下，如果可以，我希望将页面连续保存到3个人，而且我不希望图像大小发生变化。

同样，非常感谢任何帮助。

由于

2 个答案:

答案 0 :(得分：2)

您错过了相对于.info的位置，这就是.hovercontent无法正确定位的原因：

.info {
  position: relative;
}

段： 

.info {
  position: relative;
  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.info {
  position: relative;
  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}
＆＃13; 
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
<div id="john" class="info"> 
  <h5>John Smith</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题