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

悬停在图片上时要添加的内容：
例如到第一个（我添加类来cout img）

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

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;