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

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 >
                <div >
                    <div >
                        <div >
                            <h1 >Laboratorios</h1>
                        </div>
                        <div >
                            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 >
                            <button >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>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        <h1 >Laboratorios</h1>
      </div>
      <div >
        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 >
        <button >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 >
  <div >
    <div >
      <div >
        <h1 >Laboratorios</h1>
      </div>
      <div >
        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 >
        <button >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>