Tips for focusing on a background image without being distracted by its child elements

Question

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and I suspect it might have to do with 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.169l...
                                </svg>



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

html css twitter-bootstrap css-selectors

Answer 1

Answer №1

There are a variety of ways to achieve this effect. Two simple methods I recommend include adjusting the size of the background image or utilizing the pseudo-element transition to create a zoom effect 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;
  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>

Answer 2

There are a variety of ways to achieve this effect. Two simple methods I recommend include adjusting the size of the background image or utilizing the pseudo-element transition to create a zoom effect 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;
  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>

Tips for focusing on a background image without being distracted by its child elements

Answer №1

Similar questions

Running system commands using javascript/jquery

What could be the reason for the lack of a border below the navigation bar in this code?

Dark Mode Caused by CSS Overriding Accordion

Manipulating viewport settings to simulate smaller screens on a desktop device

ERB failing to interpret Ruby script

What is the best way to make my page headers resize with a responsive layout?

Adjusting the size of images in a Bootstrap lightbox gallery

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

Having trouble with overriding an @media query for material-ui react components?

Error alert: Blinking display, do not dismiss

What's preventing me from tapping on hyperlinks on my mobile device?

Make sure the inputs in separate table data cells are lined up in

Using :nth-child on elements with the same class name does not produce the desired result

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

What is the best method to retrieve duplicate fields from a database in HTML5?

The lightbox is triggered by clicking on a different div to display its content

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

What's the Best Way to Add a Border to My Two-Column Form?

Using jquery to dynamically set the value of a drop down menu

The fluid table within the Bootstrap container is not adapting to different screen