图像悬停的奇怪问题

Question

我对鼠标图像悬停产生影响，但是我遇到了问题。

我有3篇文章，当我将图像悬停时，所有其他图像都向右移动。

我发现问题在这里：.second-effect：hover a.info {}，因为如果我移除transform:scale(1,1)，当我将图像悬停在图像上时，其他图像不会移动。

但是，如果没有这种转换，我想在图像中心显示的图标字体不会出现。

的问题是在这里：

.second-effect:hover a.info { 
    opacity:1; 
    -moz-transform:scale(1,1); 
    -webkit-transform:scale(1,1); 
    -o-transform:scale(1,1); 
    -ms-transform:scale(1,1); 
    transform:scale(1,1); 
    -moz-transition-delay:0.3s; 
    -webkit-transition-delay:0.3s; 
    -o-transition-delay:0.3s; 
    -ms-transition-delay:0.3s; 
    transition-delay:0.3s; 
} 

所以我想在我的那个I'm与CSS过渡做正方形内图像的中心图标字体。

如果我删除transform:scale(1,1)图标不会出现。

如果当我将图像悬停时，我不删除此代码，其他图像也在移动。

任何人都可以理解为什么发生这种情况？

我的jsfiddle：

http://jsfiddle.net/ritz/m78QF/1/

我的整个HTML针对此问题：

<article id="news"> 
    <div class="view second-effect"> 
     <img src="imagens/transferir (1).jpg" /> 
     <div class="mask"> 
      <a href="#" class="info"><i class="fa fa-download"></i></a> 
     </div> 
    </div> 
     <h2> 
     <a>Title Post number one</a> 
     <br /> 
    </h2> 
    <span>Date of post number one</span> 
    <p>Post Number one</p> 
</article> 

我对这个问题的所有CSS：

.info>i{font-size:1.7em; margin-top:15px; color:#000; } 

    #news img 
    { 
     width:155px; 
     height:140px; 
    } 

    .view a.info { 

     padding:0; 
     width:20px; 
     height:20px; 
    } 

    .view { 
     width: 155px; 
     height: 140px; 
     float: left; 
     overflow: hidden; 
     position: relative; 
     text-align: center; 
     box-shadow: 0px 0px 5px #aaa; 
     cursor: default; 
     margin-right:20px; 
     border:3px solid #ccc; 
     margin-top:4px; 

    } 
    .view .mask, .view .content { 
     width: 155px; 
     height: 140px; 
     position: absolute; 
     overflow: hidden; 
     top: 0; 
     left: 0; 
    } 

    .view img { 
     display: block; 
     position: relative; 
    } 
    .view a.info>i{ 

    }  
    .second-effect .mask { 
     opacity: 0; 
     overflow:visible; 
     border:0px solid rgba(0,0,0,0.7); 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     box-sizing:border-box; 
     -webkit-transition: all 0.4s ease-in-out; 
     -moz-transition: all 0.4s ease-in-out; 
     -o-transition: all 0.4s ease-in-out; 
     -ms-transition: all 0.4s ease-in-out; 
     transition: all 0.4s ease-in-out; 
    } 
    .second-effect a.info { 
     position:relative; 
     top:-10px; 
     opacity:0; 
     -moz-transform:scale(0,0); 
     -webkit-transform:scale(0,0); 
     -o-transform:scale(0,0); 
     -ms-transform:scale(0,0); 
     transform:scale(0,0); 
     -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; 
     -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; 
     -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; 
     -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; 
     transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; 
    } 
    .second-effect:hover .mask { 
     opacity: 1; 
     border:55px solid rgba(0,0,0,0.7); 
    } 
    .second-effect:hover a.info { 
     opacity:1; 
     -moz-transform:scale(1,1); 
     -webkit-transform:scale(1,1); 
     -o-transform:scale(1,1); 
     -ms-transform:scale(1,1); 
     transform:scale(1,1); 
     -moz-transition-delay:0.3s; 
     -webkit-transition-delay:0.3s; 
     -o-transition-delay:0.3s; 
     -ms-transition-delay:0.3s; 
     transition-delay:0.3s; 
    } 

Answer 1

将bottom: 5px;添加到.view img应该实现此目的。

JSFiddle宽度更新.view img

.view img { 
    display: block; 
    position: relative; 
    bottom: 5px 
} 

编辑： 变化

.second-effect:hover .mask { 
opacity: 1; 
border: 55px solid rgba(0,0,0,0.7); 
} 

到

.second-effect:hover .mask { 
opacity: 1; 
border: 55px solid rgba(0,0,0,0.7); 
padding-top: 36px; 
} 

将作出过渡的白色区域大一点。

Answer 2

为什么你的CSS有margin-top集？这不会推倒你的偶像吗？尝试评论它，看看它是否改变了图标的位置。如果是这样，只需减少你的margin-top，这应该使你的图标到位。

.info>i 
{ 
font-size:1.7em; 
/* margin-top:15px; */ 
color:#000; 
margin-bottom:5px; 
}