More Efficient way to zoom background image

Question

My current code for enlarging the background-image is as follows.

.portfolioItem {
    width: 25vw;
    height: 25vw; 

    background-size: 100% 100%;
    background-position: center;
    overflow: hidden;

    position: relative;

    transition: all .4s ease-out;
}

.portfolioItem:hover {
    background-size: 110% 110%;
}

I've attempted to streamline it as much as possible but it still lags very heavily.

Is there another method of performing this action with less lag/higher performance? I'm open to JS solutions but CSS definitely seems like the best tool for the job in my mind.

Answer 1

you can use the css transformor css3 transform or animation just like this

.portfolioItem:hover{
-webkit-animation:ex 2s;
}

@-webkit-keyframes ex{
   0%{transform:scale(1,1);}
   100%{transform:scale(2,2);}
}