悬停时背景图像缩放而不更改文本大小

3回答

守着星空守着你

不要使用scale()整个元素，而是使用background-size属性，这种方式font-size将保持不变，让我知道它是否适合你。.bg {  width: 400px;  height: 240px;  margin: 30px auto;  background: url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1) no-repeat center center;  background-size: 100%; /* work with the background-size */  transition: background-size 1s ease-in-out;  position: relative;  z-index: 1;}.bg:hover {  background-size: 120% /* work with the background-size */}.bg::before {  position: absolute;  content: '';  width: 100%;  height: 100%;  background: rgba(0,0,0,.5);  top: 0;  left: 0;  z-index: -1;}.bg h2 {  text-align: center;  font-size: 60px;  line-height: 230px;  font-family: sans-serif;  color: #fff;}<div class="bg">  <h2>WHO</h2></div>

犯罪嫌疑人X

那是的预期行为scale，它也扩展了每个孩子，只改变 bg 也许你应该使用其他方法。我提供了一个，我希望它适合你的需要。在这种方法中，BG 是一个绝对元素，不是的容器，h1悬停现在是 onsplit-image-link而不是zoom-image。* { margin: 0; padding: 0; }body {}.article-container {    width: 300px;    height: 200px;    border: 1px solid #000000;    overflow: hidden;    position: relative;}.article-img-holder {    width: 100%;    height: 100%;    background: url(https://awik.io/demo/background-image-zoom/traffic2.jpg);    background-position: center;    background-size: cover;    background-repeat: no-repeat;    transition: all 1s;}.article-img-holder:hover {    transform: scale(1.2);}.split-image-links {    width: 100%;    height: 100vh;    display: flex;}.split-image-links .split-image-link {    width: 25%;    height: 100%;    overflow: hidden;    position: relative;}.split-image-links .split-image-link .zoom-image {    width: 100%;    height: 100%;    cursor: pointer;    position: relative;}.split-image-links .split-image-link .zoom-image .split-image-header {    z-index: 1;    position: absolute;    left: 0;    right: 0;    bottom: 0;    top: 0;    margin: auto;    color: #fff;}.split-image-links .split-image-link .zoom-image-headline {    position: relative;    color: #fff;    text-align: center;    line-height: 100vh;    font-family: 'Poppins';    text-transform: uppercase;    font-size: 45px;    font-weight: 600;}.split-image-links .split-image-link .zoom-image.zoom-image-first {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;    background: linear-gradient(          rgba(0, 0, 0, 0.4),           rgba(0, 0, 0, 0.4)        ), url(https://api.time.com/wp-content/uploads/2020/07/jeff-bezos.jpg?quality=85&w=1024&h=628&crop=1);    background-position: center;    background-size: cover;    background-repeat: no-repeat;    transition: all 0.5s;}.split-image-links .split-image-link:hover .zoom-image {    transform: scale(1.1);}<body>    <div class="split-image-links">        <div class="split-image-link">            <div class="zoom-image zoom-image-first"></div>            <h1 class="zoom-image-headline">who</h1>        </div>    </div></body>

手掌心

这是您需要的基本版本。.content {  position: relative;  /* border: 1px solid red; */  display: inline-block;}h1 {  color: #FFF;  margin: 0;  position: absolute;  top: 50%;    left: 50%;  transform: translate(-50%, -50%);  z-index: 999;}.bg:hover, h1:hover + .bg {  transform: scale(1.1);  transition: all 1s;}<div class="content">  <h1>WHO</h1>  <img class="bg" src="https://awik.io/demo/background-image-zoom/traffic2.jpg" alt="background image"></div>