Странная проблема при наведении изображения

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), появится значок dont.

Если я не удаляю этот код, когда нахожу изображение, другие изображения также перемещаются.

Может ли кто-нибудь понять, почему это происходит?

Мой 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 
} 

EDIT: Изменить

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