如何防止css上的水平滚动缩放动画

我想使用横向图像，即放大中心的地标并停留在那里。我有一个主要的问题，我有当前的代码..如何防止css上的水平滚动缩放动画

这是在变焦上的水平条。

我想要的形象具有100％的宽度，但高度约为80％

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 



<link type="text/css" rel="stylesheet" href="css/animate.css"> 
<link type="text/css" rel="stylesheet" href="css/home1.css"> 

</head> 

<body> 
<div id="wrapper"> 

<a href="#"> 
    <img src="images/zoom.jpg" alt=""> 
</a> 

</div><!--wrapper--> 



</body> 
</html>

CSS：

a { 
    overflow:hidden; 
    width:100%; 

} 


a img { 
    text-decoration: none; 
    display: block; 
    width: 100%; 

    float: left; 
    margin: 0 3px 3px 0; 
    opacity: 1; 
    -webkit-transform: scale(1,1); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 250ms; 
    -moz-transform: scale(1,1); 
    -moz-transition-timing-function: ease-out; 
    -moz-transition-duration: 250ms; 
} 
a img:hover { 
    opacity: .7; 
    -webkit-transform: scale(2.05,2.07); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 250ms; 
    -moz-transform: scale(2.05,2.07); 
    -moz-transition-timing-function: ease-out; 
    -moz-transition-duration: 250ms; 
    position: relative; 
    z-index: 99; 


}

我也想知道是否有一旦悬停完成后，我可以使其保持放大状态，以便在该点出现另一个元素，但缩放更近。

http://jsfiddle.net/itsnamitashetty/U4HTu/

来源

2014-05-09 new_frontenddev

添加display:block;到a CSS。它会解决你的问题。演示：http://jsfiddle.net/lotusgodkk/U4HTu/1/

a { 
    overflow:hidden; 
    width:100%; 
    display:block; 
}

来源

2014-05-09 18:14:43

如何防止css上的水平滚动缩放动画

回答

相关问题