Я пытаюсь сделать так, что, когда я передаю указатель мыши на картинке, я хочу показать черный ящик, который появляется закрытием, оставаясь только квадратом посередине, где я хочу поместить значок значка поиска.
Я нашел учебник, в котором объясняется, как это сделать, но это объясняет очень легко.
У меня проблема, потому что я хотел, чтобы моя фотография имела ширину: 155 пикселей; и высота: 140px ;.
Но когда я даю значения этой ширины и высоты в .view {}
квадрат посередине, который я не хочу превращать, черный исчезает, и я хочу, чтобы этот квадрат был видимым для поиска икон. Может быть, я не очень хорошо себя объяснил, но я думаю, что с помощью jsFiddle вы можете понять мою проблему. Хотелось бы, чтобы вы мне помогли, любая помощь приветствуется!
Моя скрипка лучше понять:
http://jsfiddle.net/ritz/cQL4S/
Мой html:
<div class="view second-effect">
<img src="images/image1.jpg" />
<div class="mask">
<a href="#" class="info">Read More</a>
</div>
</div>
Мой css:
.view {
width: 225px;
height: 225px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 225px;
height: 225px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(../img/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.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:100px 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;
}
Мой вопрос с проблемой:
Положение значка неправильное. http://jsfiddle.net/ritz/cQL4S/5/
.second-effect a.info {
top: 20px;
}
Я сделал красный фон, чтобы вы могли видеть.
Когда вы изменяете размер контейнера, вам также придется изменять размер зависания. Наклон имеет границу 100 пикселей. Это больше, чем контейнер.
.second-effect:hover .mask {
border:40px solid rgba(0,0,0,0.7);
}
Кроме того, если вы новый размер, это не квадрат, граница не является квадратом.