[英]image hover effect issue
我試圖做一個效果,當我將鼠標移到圖片上時,我想要顯示一個黑色的盒子,顯示關閉只留在中間的一個正方形,我想放置一個搜索圖標的圖標。
我找到了一個教程,解釋了如何做到這一點,但它解釋得很輕松。
我遇到了問題,因為我希望我的照片有寬度:155px; 和身高: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;
}
我的問題是:
調整容器大小時,還必須調整懸停大小。 懸停的邊框為100px。 這不僅僅是容器。
.second-effect:hover .mask {
border:40px solid rgba(0,0,0,0.7);
}
另外,你的新尺寸不是正方形,邊界不是正方形。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.