CSS image zoom and center on hover

Question

Possible to zoom and center an image on hover with only CSS?

For instance:

Code below will only zoom:

JSFiddle: https://jsfiddle.net/6r0bx6ba/1/

 .floatl { float: left; } .main { width: 100%; } .submain { width: 30%; float: left; } .zoomin img { width: 200px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .zoomin img:hover { width: 300px; } 

 <div class="main"> <div class="zoomin submain"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> <div class="zoomin submain"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> <div class="zoomin submain"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> </div> 

Answer 1

What about to add when hover on image:
for example to the first one (I add class to cout the img)

margin-left:70px;
margin-top:70px;

 .floatl { float: left; } .main { width: 100%; } .submain { width: 30%; float: left; } .zoomin img { width: 200px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .a img:hover{ margin-left:100px; margin-top:70px;} .b img:hover{ margin-top:70px;} .c img:hover{ margin-left:-70px; margin-top:70px;} 

 <div class="main"> <div class="zoomin submain a"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> <div class="zoomin submain b"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> <div class="zoomin submain c"> <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " /> </div> </div>