Applying Transform:scale To Just The Background Image

I am trying to achieve a classy zoom in effect on a div's background image with background-size:cover using transform:scale. The problem I am facing is that the scale seems to enl

Solution 1:

CSS is very simple. You can change background size with a transition on hover instead of scaling.

.despre-noi-image {
    width: 40%;
    height: 500px;
    background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: all .7s;
}
.despre-noi-image:hover {
    transition: all 1s;
    background-size: 110%;
}

Solution 2:

background-size:cover won't work for you.

.despre-noi-image{
    width:100%;
    height: 500px;
    background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg') no-repeat center center;  

    background-size: 100%; 
    text-align: left;
    background-position-x: 50%;
    background-position-y: 50%;
    -webkit-animation: zoomin 10s linear;
    animation: zoomin 5s linear;
    animation-fill-mode: forwards;
  background-origin:center;
}

@-webkit-keyframes zoomin {
    0% {
       background-size: 100%; 
    }
    100% {
       background-size: 150%; 
    }

}

Updated Code

Solution 3:

/* Add new element */.container{
  width: 40%;
  height: 500px;
  overflow: hidden;
}
.despre-noi-image{
	width:100%;  /*change */height: 500px;
	background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine-evening.jpg') no-repeat center center;  
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover; 
	text-align: left;
	background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 10s linear;
	animation: zoomin 10s linear;
	animation-fill-mode: forwards;

}

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

}

<divclass="container"><divclass="despre-noi-image">&nbsp;</div><!-- despre-noi-image --></div>

Is this what you want?

You just use overflow: hidden