我正在尝试创建一个库,但是,我遇到了scale属性的问题。 似乎如果我快速悬停在几个元素上,由于scale(),它们会开始前后移动大约1px。
HTML:
<section id="first">
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
<section>
<img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />
<a href="#">
<div class="shade">
<h5>Cappuccino</h5>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
</div>
</a>
</section>
CSS:
#first img, .shade{
margin-left:0.5%;
margin-bottom:0.5%;
}
#first>section{
position:relative;
float:left;
margin: 0.7% 0.7% 0 0;
overflow:hidden;
width:273px;
height:182px;
}
#first>section img{
position:relative;
-webkit-transition: all 0.2s linear;
}
#first>section>img:hover{
-webkit-transition: all 0.2s linear;
}
.shade:hover{
opacity:1;
}
.shade{
width: 253px;
height: 162px;
background:rgba(255, 144, 0, 0.65);
position:absolute;/* needed*/
top:0;/* needed*/
left:0;/* needed*/
opacity:0;
color:#fff;
padding:10px;
-webkit-transition: all 0.2s ease-in-out;
}
.shade p{
margin-top:60px;
width: 255px;
}
.shade h5{
text-decoration:underline;
font-size:110%;
jQuery的:
$(window).load(function(){
picLink=$("#first a");
picLink.mouseover(function(){
$(this).prev().css("-webkit-transform","scale(1.3)");
});
picLink.mouseout(function(){
$(this).prev().css("-webkit-transform","scale(1.0)");
});
});
这是一个实例: http://jsfiddle.net/VJWg6/1/
答案 0 :(得分:2)
我认为通过“来回走动”,你的意思是这种略微令人不安的影响,覆盖了左侧小的1px宽的空间。
之所以发生这种情况是因为您指定了margin-left
属性(#first img
)。此边距会在overflow:hidden
容器(section
)内保留空间,因此调整图像大小时,它们只会覆盖此空间。
作为解决方案,您只需移除图片上的margin-left
并将其移至section
(当然,由于上下文发生变化,您需要调整百分比。)。