background-size: cover. Is there any way to add a percentage value?

Question

I want to add an Event Hover that slightly increases the size of the image I’m using from the background, but to keep it responsive accurate background-size:cover.

follows an excerpt of code made with scss:

&_container_row_{$i}{
        background: url('../img/BurgerImage{$i}.png') no-repeat;
        background-size: cover;
        background-position: center;
        padding: 30px;
        border-radius: 15px;
        @include imageTitle;
        transition: background-size 0.3s ease-in-out;
    }

    &_container_row_{$i}:hover{
        background-size: cover;
    }

I’d like to do something like:

&_container_row_{$i}:hover{
        background-size: calc(cover + 15%);
    }

Thank you from the outset to those who can answer!

Answer 1

Guy in the BG of the element itself you can not, but if you put this bg in a pseudo-element you can use transform: scale(1.15) to increase in 15%

Here is a didactic example

li {
  padding: 30px;
  border-radius: 15px;
  position: relative;
  display: inline-block;
}
li::before {
  background: url(https://unsplash.it/100/100) no-repeat;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease-in-out;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
li:hover{
  z-index: 2;
}
li:hover::before{
  transform: scale(1.15);
}

<ul>
  <li>123</li>
  <li>123</li>
</ul>