CSS图像缩放和悬停居中

Question

可以仅使用CSS在悬停时缩放和居中图像吗？

例如：

以下代码仅会缩放：

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

将鼠标悬停在图片上时会添加什么：
例如第一个（我添加了类来输出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>