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