gpt4 book ai didi

html - 背景大小:覆盖悬停缩放过渡

转载 作者:技术小花猫 更新时间:2023-10-29 12:05:36 27 4
gpt4 key购买 nike

我想在用户悬停带有图像背景的链接 (div) 时产生缩放效果。

当我只想缩放背景而不是文本时,我不知道该怎么做!而且我找不到最好的方法。

这是一个代码(不能像我想要的那样工作):

.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>

最佳答案

如果将 background-size 属性设置为 cover,则无法顺利地为其设置动画。但是您可以通过动画化 transform 来伪造它。由于您只想缩放图像,而不是缩放内容,因此您需要一个专用于显示图像的子元素(在下面的示例中使用伪元素完成)。

.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>

关于html - 背景大小:覆盖悬停缩放过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39603641/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com