Pan effect on image using CSS

Question

I want a pan effect on image using CSS. I have got a zoom effect working but that's not what I want. I want the image to be the same height but have the pan effect in it.

 .col_2 { width: 46%; margin-left: 2%; margin-right: 2%; margin-bottom: 50px; float: left; display: block; } .box { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); border: 1px solid #eeeeee; position: relative; display: flex; flex-direction: column; background: #fff; } .box:hover { box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25); } .box .image { overflow: hidden; } .box .image img { width: 100%; max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .image:hover img { overflow: hidden; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 

 <div class="col_2 box"> <a href="#" class="image"> <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a> </div> 

Answer 1

Just change:

transform: scale(1.1);

to: // Note, you can pass x, y to translate or you can just use // translateX() or translateY() transform: translate(someAmount);

to get a pan effect. But, to be able to pan in a certain direction (dynamic) pan amount, you will need to get the position of the mouse on the element and make some decisions based on that.

Also, transitions and transforms are well supported in all modern browsers and have been for several years now. You can drop all the vendor prefixes.

 .col_2 { width: 46%; margin-left: 2%; margin-right: 2%; margin-bottom: 50px; float: left; display: block; } .box { transition: all 0.3s ease-out; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); border: 1px solid #eeeeee; position: relative; display: flex; flex-direction: column; background: #fff; } .box:hover { box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25); } .box .image { overflow: hidden; } .box .image img { width: 100%; max-width: 100%; transition: all 0.3s; } .image:hover img { overflow: hidden; transform: translateY(-25%); /* translate is for move (pan), not scale */ } 

 <div class="col_2 box"> <a href="#" class="image"> <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a> </div>