Zoom out image with CSS3

Question

Let's say that I need to make an animation of zooming out the image. This image is set by the user of my site and I don't know its resolution. So, there is a random image on the page and when a visitor clicks on the button it should zoom out the image. JavaScript/jQuery is used only in my example to let you know, what's my point, so CSS approach is what I am looking for. Under this text, you can see my code example. When you click on the "toggle" anchor, it should zoom image away.

$(function() {
  $('.toggle').click(function(e) {
    e.preventDefault();
    $('#test').toggleClass('active');
  });
});

#test {
  position: relative;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all 5s;
}
#test.active img {
  width: auto;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" />
</div>
<a href="#" class="toggle">Toggle</a>

EDIT:

Since this question received a lot of views, I updated my old jsFiddle which I pointed out in the accepted answer as a solution. It is not good and you should not use it at all. There is a 99% chance you don't need to use it like that.

https://jsfiddle.net/gej1zb67/

Try to run snippet. It will just jump to full height and I need to animate it. — Patrik Krehák, Apr 11 '16 at 13:56
CSS transitions don't work from/to `auto` values. See http://n12v.com/css-transition-to-from-auto/ for a possible workaround. Or have a look at http://stackoverflow.com/q/3508605/1295622 — RWAM, Apr 11 '16 at 14:15

score 6 · Accepted Answer · answered Apr 11 '16 at 14:08

6

Perhaps this is what you're looking for?

#test.active img {
  transform: scale(2,2);
}

answered Apr 11 '16 at 14:08

larspeeters

96
5

Well, not really, but I made something like that https://jsfiddle.net/pfqxew7c/ - so you helped me to find a way to goal. But I need to test iton more images. – Patrik Krehák Apr 11 '16 at 14:33

score 1 · Answer 2 · answered Apr 11 '16 at 14:42

I found transitions do not work with auto value at the moment. You can just give the img a pixel / percentage or em width. That will work ( not as you would like, but it will animate ).

Nikita Vasilyev made a js solution for the auto value problem:

http://n12v.com/css-transition-to-from-auto/

score 1 · Answer 3 · answered Apr 11 '16 at 14:57

I don't think there's a css only way, but you can set the values with javascript and let the css transition handle the animation.

(function init) You need to implement something like this instead of that setTimeout (it's just so you know when the images are loaded) and then you run some calculations and store that data in the img tag.

(function toggle) Then you just change the sizes of the image according to that 'zoom' data;

I think that is the simplest way to achieve the desired effect

$(function() {
  
  function init(img){
    var sizes = {
          iHeight: img.height(),
          iWidth: img.width(),
          pHeight: img.parent().height(),
          pWidth: img.parent().width()
        };
    sizes.prop = sizes.iWidth / sizes.iHeight;
    img.data('zoom', false).data('sizes',sizes).width(sizes.iWidth).height(sizes.iHeight);
  }

  function toggleZoom(img){
    var hasZoom = img.data('zoom'),
        sizes = img.data('sizes');
    if(!hasZoom){
      img.width(sizes.prop * sizes.pHeight).height(sizes.pHeight);
    }else{
      img.width(sizes.iWidth).height(sizes.iHeight);
    }
    img.data('zoom', !hasZoom);
  };
  
  setTimeout(function() {
    init($('#test img'));
  }, 300);

  $('.toggle').click(function(e) {
    e.preventDefault();
    // $('#test').toggleClass('active');
    toggleZoom($('#test img'));
  });
});

#test {
  position: relative;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all 5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" />
</div>
<a href="#" class="toggle">Toggle</a>

Thanks, but I need only CSS. I already found a solution (hack) for this with only CSS, look at this: https://jsfiddle.net/pfqxew7c/ — Patrik Krehák, Apr 12 '16 at 07:12

Zoom out image with CSS3

3 Answers3