使用变换：缩放，放大图像在悬停，仍然使图像从外面更大 [英] Zoom in on image on hover using transform: scale, still making image bigger from outside
本文介绍了使用变换：缩放，放大图像在悬停，仍然使图像从外面更大的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我如何做到这样的图像放大本身与外部更大，例如这是我想要的，我已经尝试实现这个但它不工作相同： http://jsfiddle.net/7vY7v/130/ 。我在做错了什么？
我使用bootstrap，并在imgs aswell上使用 img-responsive
到目前为止我所做的演示： http://codepen.io/anon/pen/XJzexN
代码：
HTML：
< html>
< head>
< title>< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0 user-scalable = no>
< link href ='http：//fonts.googleapis.com/css？family = Lato：100,300,400,700,900'rel ='stylesheet'type ='text / css'>
< link href ='http：//fonts.googleapis.com/css？family = Roboto：400,100,300,500,700,900'rel ='stylesheet'type ='text / css'>
< link href ='http：//fonts.googleapis.com/css？family = Open + Sans：400,300,600,700,800'rel ='stylesheet'type ='text / css'>
< link href =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css =stylesheet>
< link href =http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css =stylesheet>
< link rel =stylesheettype =text / csshref =css / style.css>
< / head>
< body>
< div class =container>
< div class =row>
< div class =col-md-6 img-wrapper>
< img src =https://unsplash.it/800alt =class =img-responsive>
< / div>
< div class =col-md-6 img-wrapper>
< img src =https://unsplash.it/800alt =class =img-responsive>
< / div>
< / div>
< div class =pushdown>< / div>
< div class =row>
< div class =col-md-6 img-wrapper>
< img src =https://unsplash.it/800alt =class =img-responsive>
< / div>
< div class =col-md-6 img-wrapper>
< img src =https://unsplash.it/800alt =class =img-responsive>
< / div>
< / div>
< / div>
< div class =container-fluid>
< div class =row>
< div class =people>
< / div>
< / div>
< / div>
< / body>
< / html>
CSS：
code> .img-wrapper {
display：inline-block;
overflow：hidden;
}
.img-wrapper img {
-webkit-transition：all .5s ease;
-moz-transition：all .5s ease;
-ms-transition：all .5s ease;
-o-transition：all .5s ease;
transition：all .5s ease;
vertical-align：middle;
}
.img-wrapper img：hover {
transform：scale（1.5）;
-ms-transform：scale（1.5）; / * IE 9 * /
-moz-transform：scale（1.5）; / * Firefox * /
-webkit-transform：scale（1.5）; / * Safari和Chrome * /
-o-transform：scale（1.5）; / * Opera * /
}
解决方案
更改您的HTML结构：
< div class =col-md-6>
< div class =img-wrapper>
< img src =https://unsplash.it/800alt =class =img-responsive>
< / div>
< / div>
元素出现扩展的原因是父元素有填充 .col-md-6 元素（ padding-left / padding-right 15px ）。
通过将直接父元素更改为
.img-wrapper ，你有效地替换这个并隐藏溢出。
How do I make it so the image zooms in on itself with out making the outside larger e.g this is what I want, I have tried to implement this but it doesn't work the same: http://jsfiddle.net/7vY7v/130/. What am I doing wrong?
I am using bootstrap, and using the img-responsive class on the imgs aswell.
Heres my demo of what I have done so far: http://codepen.io/anon/pen/XJzexN
Code:
HTML:
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
<div class="col-md-6 img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
</div>
<div class="pushdown"></div>
<div class="row">
<div class="col-md-6 img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
<div class="col-md-6 img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="people">
</div>
</div>
</div>
</body>
</html>
CSS:
.img-wrapper {
display: inline-block;
overflow: hidden;
}
.img-wrapper img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
vertical-align: middle;
}
.img-wrapper img:hover {
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
解决方案 Change your HTML structure to this:
<div class="col-md-6">
<div class="img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
</div>
The reason the element appeared to be expanding was because there is padding on the parent .col-md-6 element (padding-left/padding-right of 15px).
By changing the immediate parent element to .img-wrapper, you effectively displace this and hide the overflow.
这篇关于使用变换：缩放，放大图像在悬停，仍然使图像从外面更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
