CSS背景图片动画

Question

Is there a way to use transform: scale() on only the background image?

What I want to do is on hover make the background scale up

html

<div class="square">
    //Content in here
</div>

css

.square{
background: url('image goes here');
background-size: cover;
height: 50vw;
width: 50vw;

so I don't want the content to scale only the background image on hover

If anyone knows a way I can do this would be great

Thanks

Answer 1

If it's just the background-size and you're not relying on "cover" or "contain" for the initial value, then changing the background-size on hover should be enough.

If not, stacking a pseudo-element with the background while keeping your element background transparent, then using the transforms on the pseudo-element will do the trick

edit: Adding example :)

<style>
.container{
  overflow:hidden;
  position:relative;  
}

.scalable-bg::before{
  content:"";
  background:url('http://lorempixel.com/600/400');
  background-size:cover;
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:-1;
  transition:all 1s ease;
}

.scalable-bg{
  padding:2em;
  color:white; text-shadow: 2px 2px 0 black;
}

.scalable-bg:hover::before {
  transform: scale(2);
}
</style>
<div class="container">
  <div class="scalable-bg">
    <h1>
      Something
    </h1>
    <p>
    Something, something, something, darkside. Something, something, complete
    </p>
  </div>
</div>

https://jsfiddle.net/2kzk1acr/3/