Я влияю на наведение изображения мыши, но у меня проблема.
У меня есть 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;
}
Поэтому я хочу, чтобы в центре моего изображения внутри квадрата был шрифт значка, который я делаю с переходами 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;
}
Почему у вашего CSS есть margin-top
набор? Разве это не будет толкать ваш значок? Попробуйте прокомментировать это и посмотрите, изменит ли он положение значка. Если это так, просто уменьшите margin-top
и верните свой значок.
.info>i
{
font-size:1.7em;
/* margin-top:15px; */
color:#000;
margin-bottom:5px;
}
Добавление 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;
}
Это сделает белую область перехода немного больше.
icon font
?
position: absolute;
иposition: relative;
в класс.view
. Последнее свойство переопределит предыдущее свойство, делая его бессмысленным. Кроме того, почему пустой.view a.info>i{}
селектор? Трата места там.bottom:5px
это поднимет его на 5px снизу, или, если вам нужно отрегулировать его сверху, вы можете сказатьtop:-5px