当前位置： 文江博客话题详情

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

发布于 2025-01-11 16:43:23 字数 2636 浏览 0 评论 0原文

我想缩放到背景图像并制作动画，但这不是我想要的结果，因为所有子元素都是动画和缩放的，在悬停时我希望它仅动画和缩放到背景部分，我不确定，但我认为这是 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>
原文

I want to zoom to the background-image and make an animation but it is not the result I want since all the child elements are animated and zoomed, at the moment of hovering I want it to be animated and zoomed only to the background part , I'm not sure but I think it's the html structure

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

入怼 2025-01-18 16:43:23

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

使用过渡和背景大小

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

使用过渡和伪元素 ::before 或 ::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>

It can be done in many ways. I can suggest two simple ways. For example, just change the size of the background image or use the pseudo-element transition to zoom in on hover.

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>

回复 原文
~没有更多了~

关于作者

゛清羽墨安

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文