Question

我正在使用instafeed来获取一些Instagram照片，并且在悬停时我想要图像＆＃39;不透明度减少并且文本出现在中间。我实现了它，但是一旦我将鼠标悬停在图像上，整个div就会被推下来，我无法弄清楚原因。

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;添加到social-txt

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

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

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

div被悬停在图像上

1 个答案: