背景大小:覆盖悬停缩放过渡 [英] Background-size: cover on hover zoom transition
问题描述
当用户悬停链接(div)带有图像背景时,我想制作缩放效果.
当我只想缩放背景而不是文本时,我不知道该怎么做!而且我找不到最好的方法.
这是一个代码(不能如我所愿):
.light_blue {显示:块;颜色:#fff;背景重复:不重复;-webkit-background-size: 封面;-moz-background-size: 封面;-o-background-size: 封面;背景尺寸:封面;背景位置:中心;宽度:100%;}a.light_blue:悬停{文字装饰:无;颜色:#fcb428;}div.wrap {高度:33%;宽度:33%;溢出:隐藏;位置:相对;}.裹 {-moz-transition:所有 .5 秒;-webkit-transition:所有 .8s;过渡:所有 .8 秒;背景位置:居中;}.wrap:悬停{-webkit-background-size: 120%;-moz-background-size: 120%;-o-背景尺寸:120%;背景尺寸:120%;}.bg_flat {位置:绝对;字体系列:档案窄";背景:网址(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);背景大小:包含;底部:0px;填充:5px;}.bg_naglowek {文本转换:大写;字体大小:29px;}.bg_flat2 {位置:绝对;背景: url(../img/black_bg4.png);背景大小:包含;字体系列:档案窄";底部:5px;宽度:-webkit-calc(100% - 10px);宽度:计算(100% - 10px);填充:15px;}
<a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); 高度:180;"><div class="bg_flat2"><b class="bg_naglowek">Hello World</b></a>
如果将 background-size
属性设置为 cover
,您将无法平滑地为其设置动画.但是你可以通过动画 transform
来伪造它.而且由于您只希望缩放图像,而不是内容,因此您需要一个专用于显示图像的子元素(在下面的示例中使用伪元素完成).
.wrap {宽度:33%;填充底部:20%;溢出:隐藏;位置:相对;过渡:所有 .8 秒;背景:网址(http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg);背景位置:居中;背景尺寸:封面;}.wrap::before {内容:"";位置:绝对;上:0;右:0;下:0;左:0;背景:继承;过渡:继承;}.wrap:hover::before {变换:比例(1.2);}.内容 {位置:相对;}
<div class="content">内容</div>
I want to make zoom effect when user hover link (div) with image background.
I don't know how to do it when i want to zoom only background not text! And i cant find the best way.
Here is a code (doesn't work as i want):
.light_blue {
display: block;
color: #fff;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
}
a.light_blue:hover {
text-decoration: none;
color: #fcb428;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
.wrap {
-moz-transition: all .5s;
-webkit-transition: all .8s;
transition: all .8s;
background-position: center center;
}
.wrap:hover {
-webkit-background-size: 120%;
-moz-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
}
.bg_flat {
position: absolute;
font-family: "Archivo Narrow";
background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);
background-size: contain;
bottom: 0px;
padding: 5px;
}
.bg_naglowek {
text-transform: uppercase;
font-size: 29px;
}
.bg_flat2 {
position: absolute;
background: url(../img/black_bg4.png);
background-size: contain;
font-family: "Archivo Narrow";
bottom: 5px;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
padding: 15px;
}
<div class="col-sm-4" style="padding: 5px;">
<a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;">
<div class="bg_flat2">
<b class="bg_naglowek">Hello World</b>
</div>
</a>
</div>
You can't smoothly animate the background-size
property if it's set to cover
. But you can fake it by animating transform
instead. And since you only want the image scaled, not the contents, you'll need a child element dedicated to displaying the image (done with a pseudo-element in the example below).
.wrap {
width: 33%;
padding-bottom: 20%;
overflow: hidden;
position: relative;
transition: all .8s;
background: url(http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg);
background-position: center center;
background-size: cover;
}
.wrap::before {
content:"";
position:absolute; top:0;right:0;bottom:0;left:0;
background:inherit;
transition:inherit;
}
.wrap:hover::before {
transform: scale(1.2);
}
.content {
position: relative;
}
<div class="wrap">
<div class="content">Content</div>
</div>
这篇关于背景大小:覆盖悬停缩放过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!