translate on an background image without interrupting the content inside it

Question

I'm trying to redesign a website and I have a problem. I want to use transform on a background-image without interrupting the content inside it

<div style="background-image: url(example.png)"> <!-- want to use transform on this image -->
  <h1>Hello, World!</h1> <!-- without interrupt this -->
</div>

What specifically are you trying to do to the background image? — imvain2, Aug 11 '23 at 14:36
@imvain2 I want to try to zoom on hover this background image, but all answers on the internet were also interrupt the content inside it — David Pham, Aug 11 '23 at 14:39
Just set `background-size:100%` and then on hover set `background-size:150%` or whatever you need. — Chris Barr, Aug 11 '23 at 15:02

score 1 · Accepted Answer · answered Aug 11 '23 at 14:54

Instead of applying the background image to the parent div (I've named it .headingWrapper in the below snippet), why don't you make use of pseudo-elements (::before or ::after)?

Below, I add an image to the before pseudo-element, then hovering changes the image in some way (I've simply scaled the image, but other styling is possible)

.headingWrapper::before {
  content: "";
  background-image: url("https://cataas.com/cat");
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: -1;
  transition: transform 1.2s ease-in-out;
}

.headingWrapper:hover::before {
  transform: scale(1.2);
}

<div class="headingWrapper">
  <!-- want to use transform on this image -->
  <h1>Hello, World!</h1>
  <!-- without interrupt this -->
</div>

Not bad! Although I think I'd found a solution, but this also should work and even more configuration. Thanks! — David Pham, Aug 11 '23 at 15:00

translate on an background image without interrupting the content inside it

1 Answers1