圖像懸停的奇怪問題

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