Css zoom-in effect on screen resize - css

Question

I am trying to create a zooming effect on image on screen resize that is working as on attached image example.
So first I want it to looks like the image was cut-out from the right side (but with remaining height), and then after I want to zoom-in image from all sides. Can someone suggest how can I create this effect?
I know for zooming in I should use:
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */

Answer 1

It doesn't have to do with zoom-in effect, it's more about responsive design. I don't think there is a perfect solution here, it'll depend on the content you will have on your page and on the image you want to use as a background. Without any media query, you take a look at my solution here: https://jsfiddle.net/9htcmus7/
HTML:
<div class="container">
<div class="content">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat, risus vitae aliquet consequat, eros tortor tincidunt lacus, in mollis mi est id tellus. Nulla id odio nec tortor vestibulum suscipit non id metus.
</p>
</div>
</div>
CSS:
.container {
width: 100%;
box-sizing: border-box;
padding: 10vw 20vw;
background-image: url(http://weknowyourdreams.com/images/mountain/mountain-04.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center 25%;
}
.content {
font-family: sans-serif;
line-height: 2;
color: white;
width: 25em;
max-width: 100%;
}
h1 {
font-weight: 300;
}