CODEWITHSUNDEEP
csscss-transitions
Bob
Bob

Reputation: 8714

Css zoom-in effect on screen resize

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 */

enter image description here

Upvotes: 1

Views: 3623

Answers (1)

Niss
Niss

Reputation: 116

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;
}

Upvotes: 1

Related Questions