Zoom out image with CSS3

Question

Let's say, that I need to make animation of zooming out image. This image is set by user of my site and I don't know its sizes.So, there is a random image on the page and when visitor clicks on the button, it will zoom out the image (well, this is not really what I'm looking for, but I need that animation). JavaScript/jQuery is used only in my example to let you know, what's my point.

Under this text you can see my code and example. My goal is, that image is resized to width and you don't see its full height. When you click on the "toggle" anchor, it should zoom image way, that it will resize image to full height and it will be centered.

 $(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> 

Answer 1

Perhaps this is what you're looking for?

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

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

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>