如何缩放到背景而不是其子元素

Question

我想缩放到背景图像并制作动画，但这不是我想要的结果，因为所有子元素都已设置动画和缩放，在悬停时我只想设置动画和缩放到背景部分，我不确定，但我认为是 html 结构

CSS

.laboratorio_container
{
   padding: 2em;
}

.fondo_laboratorio{
  color: white;
  background-image: url(/img/laboratorios/lab1.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 18em;
  display: flex;
  align-items: center;
}

.fondo_laboratorio:hover{
  transition: all .5s;
  transform: scale(120%);
  -webkit-transform: scale(120%);
  -moz-transform: scale(120%);
  -ms-transform: scale(120%);
  -o-transform: scale(120%);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
}

.laboratorio_container
{
  background-color:rgb(0,0,0,.5);
}

HTML

<div class="container">
                <div class="row fondo_laboratorio">
                    <div class="col laboratorio_container">
                        <div class="row ms-2">
                            <h1 class="p-0">Laboratorios</h1>
                        </div>
                        <div class="row mb-3 ms-2">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, quo explicabo beatae aspernatur debitis ut, quod asperiores necessitatibus tempora quam
                            deserunt magni facilis maxime molestias nihil laudantium exercitationem quae quaerat?
                        </div>
                        <div class="row ms-2 w-25">
                            <button class="btn btn-light">Reservar <svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="#000" d="M459.15 269.75a133.197 133.197 0 0 1-55.862 179.975l-42.782 22.541-10.52 5.533a71.277 71.277 0 0 1-62.966 1.685l-167.077-71.38 15.733-46.676 99.363 19.194-51.458-97.78-82.843-157.411 40.357-21.232 82.844 157.457 19.934-10.485-36.521-69.445 40.335-21.22 36.52 69.445 19.935-10.485-28.2-53.598 40.358-21.232 28.2 53.598 19.945-10.576-19.354-36.886 40.346-21.174 19.354 36.885 54.348 103.301zM73.268 146.674a60.03 60.03 0 0 1 42.361-102.459 60.098 60.098 0 0 1 56.58 80.169l10.588 20.013A78.29 78.29 0 0 0 115.708 26a78.233 78.233 0 0 0-5.635 156.262L99.428 162.02a59.688 59.688 0 0 1-26.16-15.346z" />
                                </svg>



                            </button>
                        </div>
                    </div>
                </div>
                </div>

Answer 1

可以通过多种方式完成。我可以建议两种简单的方法。例如，只需更改背景图片的大小或使用 pseudo-element 过渡在悬停时放大。

Using transition, and background-size

.fondo_laboratorio {
  color: white;
  height: 18em;
  display: flex;
  align-items: center;
}

.laboratorio_container {
  padding: 2em;
  background-color: rgb(0, 0, 0, .5);

  background-image: url('https://picsum.photos/640/360');
  background-position: center;
  background-repeat: no-repeat;
  background-origin: center;
  background-size: 100%;
  transition: background-size .5s;

}

.laboratorio_container:hover {
  background-size: 120%;
}

<div class="container">
  <div class="row fondo_laboratorio">
    <div class="col laboratorio_container">
      <div class="row ms-2">
        <h1 class="p-0">Laboratorios</h1>
      </div>
      <div class="row mb-3 ms-2">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, quo explicabo beatae aspernatur debitis ut, quod asperiores necessitatibus tempora quam
        deserunt magni facilis maxime molestias nihil laudantium exercitationem quae quaerat?
      </div>
      <div class="row ms-2 w-25">
        <button class="btn btn-light">Reservar <svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
            <path fill="#000" d="M459.15 269.75a133.197 133.197 0 0 1-55.862 179.975l-42.782 22.541-10.52 5.533a71.277 71.277 0 0 1-62.966 1.685l-167.077-71.38 15.733-46.676 99.363 19.194-51.458-97.78-82.843-157.411 40.357-21.232 82.844 157.457 19.934-10.485-36.521-69.445 40.335-21.22 36.52 69.445 19.935-10.485-28.2-53.598 40.358-21.232 28.2 53.598 19.945-10.576-19.354-36.886 40.346-21.174 19.354 36.885 54.348 103.301zM73.268 146.674a60.03 60.03 0 0 1 42.361-102.459 60.098 60.098 0 0 1 56.58 80.169l10.588 20.013A78.29 78.29 0 0 0 115.708 26a78.233 78.233 0 0 0-5.635 156.262L99.428 162.02a59.688 59.688 0 0 1-26.16-15.346z" />
          </svg>

        </button>
      </div>
    </div>
  </div>
</div>

Using transition, and pseudo-element ::before or ::after

.fondo_laboratorio {
  color: white;
  height: 18em;
  display: flex;
  align-items: center;

}

.laboratorio_container {
  padding: 2em;

  /* this */
  position: relative;
  overflow: hidden;
}

.laboratorio_container::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  background-image: url('https://picsum.photos/640/360');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .5s;

}

.laboratorio_container:hover::before {
  transform: scale(120%);
}

.laboratorio_container {
  background-color: rgb(0, 0, 0, .5);
}

<div class="container">
  <div class="row fondo_laboratorio">
    <div class="col laboratorio_container">
      <div class="row ms-2">
        <h1 class="p-0">Laboratorios</h1>
      </div>
      <div class="row mb-3 ms-2">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, quo explicabo beatae aspernatur debitis ut, quod asperiores necessitatibus tempora quam
        deserunt magni facilis maxime molestias nihil laudantium exercitationem quae quaerat?
      </div>
      <div class="row ms-2 w-25">
        <button class="btn btn-light">Reservar <svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
            <path fill="#000" d="M459.15 269.75a133.197 133.197 0 0 1-55.862 179.975l-42.782 22.541-10.52 5.533a71.277 71.277 0 0 1-62.966 1.685l-167.077-71.38 15.733-46.676 99.363 19.194-51.458-97.78-82.843-157.411 40.357-21.232 82.844 157.457 19.934-10.485-36.521-69.445 40.335-21.22 36.52 69.445 19.935-10.485-28.2-53.598 40.358-21.232 28.2 53.598 19.945-10.576-19.354-36.886 40.346-21.174 19.354 36.885 54.348 103.301zM73.268 146.674a60.03 60.03 0 0 1 42.361-102.459 60.098 60.098 0 0 1 56.58 80.169l10.588 20.013A78.29 78.29 0 0 0 115.708 26a78.233 78.233 0 0 0-5.635 156.262L99.428 162.02a59.688 59.688 0 0 1-26.16-15.346z" />
          </svg>



        </button>
      </div>
    </div>
  </div>
</div>

如何缩放到背景而不是其子元素

How to zoom to a background and not to its child elements

html

css

twitter-bootstrap

css-selectors