Html div在图像悬停时被按下 我使用InstagFED来拉一些Instagram照片，在悬停时，我希望图像的不透明度降低，中间出现文本。我已经实现了它，但是一旦我将鼠标悬停在一个图像上，整个div就会被按下，我不知道为什么

小提琴：

HTML:

---

如有任何见解，将不胜感激

添加

位置：相对到社交--txt

然后将change.social--txt:hover:：before改为
位置：绝对


<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>

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

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