[英]how do I zoom a background image on a div with background-size
I want a div element to stretch across that is 33% width with a background image done in css 我想要一个div元素伸展到33%宽度,背景图像用css完成
background-image:url(); background-size:cover
How do I animate a zoom-in of the image of the background in the div on mouseover or mouseneter, is there a plugin that can do this? 如何在鼠标悬停或鼠标中对div中背景图像的放大设置动画,是否有插件可以执行此操作? The background div has to use background-size:cover because it's an elastic page.
背景div必须使用background-size:cover,因为它是一个弹性页面。
I don't have a fiddle yet cos I don't know where or how to start 我没有小提琴,但我不知道在哪里或如何开始
<div class="wrap">
<div></div>
<p>hello</p>
</div>
html, body {
height: 100%;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
Demo (Using background-size: cover;
to transition/zoom the element) 演示 (使用
background-size: cover;
转换/缩放元素)
As you said that transitioning the cover
size is necessary, so I came up with the trick which I had told you previously, here I have a child element nested under position: relative;
正如你所说过,转换
cover
大小是必要的,所以我想出了我之前告诉你的技巧,这里我有一个嵌套在position: relative;
下的子元素position: relative;
element where am having the child element set to position: absolute;
将子元素设置为
position: absolute;
元素position: absolute;
with background-image
having background-size
set to cover
and then on hover
of parent, I zoom in the element using the transform: scale(2,2);
background-image
background-size
设置为cover
,然后在父母的hover
,我使用transform: scale(2,2);
放大元素transform: scale(2,2);
property. 属性。
Also, a crucial thing while working with this solution is that we need to set the z-index
of the position: absolute;
此外,使用此解决方案时至关重要的是我们需要设置位置的
z-index
position: absolute;
element lower than what the elements you will be placing inside, so it will act like a background
元素低于你将放置的元素,因此它将像
background
You cannot animate a background-size
if it's value is cover
so either you will need px
or %
, or you can also use an img
tag with transform: scale(2,2);
如果它的值是
cover
,则无法为background-size
设置动画,因此您需要px
或%
,或者您也可以使用带有transform: scale(2,2);
的img
标记transform: scale(2,2);
property. 属性。
Demo 2 (zoom-in or zoom-out from the center) 演示2 (从中心放大或缩小)
div {
height: 200px;
width: 200px;
background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
background-size: 100% 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
div:hover {
background-size: 150% 150%;
}
If you want to stick with background-size: cover;
如果你想坚持
background-size: cover;
than you will have to wrap entire element inside a wrapper element having fixed dimensions with overflow: hidden;
你将不得不将整个元素包装在一个具有固定尺寸的包装元素中,并使用
overflow: hidden;
and than scale the child element on hover
of parent element. 而且在父元素
hover
时缩放子元素。
As you commented, for an img
tag example, you can use transform: scale(2,2);
正如您所评论的,对于
img
标记示例,您可以使用transform: scale(2,2);
to achieve that with the parent element set to overflow: hidden;
实现那个父元素设置为
overflow: hidden;
div {
height:300px;
width: 300px;
overflow: hidden;
}
div img {
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
div:hover img {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
<script>
function animate(){
document.getElementById('a').style.webkitTransitionDuration='1s';
document.getElementById('a').style.backgroundSize="200% 200%";
}
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; ">
</div>
You can do something like this for webkit browsers. 您可以为webkit浏览器执行类似的操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.