div 在图像悬停时被按下

Question

我正在使用 instafeed 拉入几张 Instagram 照片，在悬停时，我希望降低图像的不透明度并让文字出现在中间。我已经实现了它，但是一旦我将鼠标悬停在图像上，整个 div 就会被向下推，我不知道为什么。

小提琴：http://jsfiddle.net/50n9aj5o/1/

HTML：

<div id="instafeed">
  <a href="http://instagram.com/p/uwEzRVQD76/" class="social--txt" target="_blank">
     <img src="//scontent-a.cdninstagram.com/hphotos-xaf1/t51.2885-15/10724794_782098195161927_1323715061_a.jpg" class="social--img">
  </a>
  <a href="http://instagram.com/p/uwERhewD6y/" class="social--txt" target="_blank">
     <img src="//scontent-b.cdninstagram.com/hphotos-xpf1/t51.2885-15/1738685_935644246450368_2120258613_a.jpg" class="social--img">
  </a>
  <a href="http://instagram.com/p/uvbUOSQo8h/" class="social--txt" target="_blank">
     <img src="//scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10727504_976335432382365_1290609468_a.jpg" class="social--img">
  </a>
  <a href="http://instagram.com/p/uvUdbFwoyF/" class="social--txt" target="_blank">
     <img src="//scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10727771_591627530962949_254447269_a.jpg" class="social--img">
  </a>
</div>

CSS：

a {
   text-decoration: none;
}

.social--txt {
   display: inline-block;
   width: 100px;
   height: 100px;
}

.social--txt:hover::before {
   content: 'test';
   color:  black;
   font-weight: 500;
   position: relative;
   top: 50%;
   left: 20%;
   text-align: center;
}

.social--img {
   width: 100px;
  -webkit-transition: opacity 0.4s ease-in-out;
     -moz-transition: opacity 0.4s ease-in-out;
      -ms-transition: opacity 0.4s ease-in-out;
       -o-transition: opacity 0.4s ease-in-out;
          transition: opacity .4s ease-in-out;
}

.social--img:hover {
   filter: alpha(opacity=50);
   opacity: 0.5;
}

任何见解将不胜感激！

Answer 1

将position: relative; 添加到社交--txt

.social--txt {
   display: inline-block;
   width: 100px;
   height: 100px;
   position: relative;
}

然后将 .social--txt:hover::before 更改为 position: absolute;

http://jsfiddle.net/50n9aj5o/4/