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/

Answer 1

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>

Answer 2

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/

Answer 3

Perhaps this is what you're looking for?

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