CSS图像缩放和悬停中心答案

【问题标题】：CSS image zoom and center on hoverCSS图像缩放和悬停中心
【发布时间】：2018-09-04 10:16:16
【问题描述】：

仅使用 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>

【问题讨论】：

如果你也做translate，那么问题是图像将从光标下方移出并且不再悬停。
正确！我不建议将鼠标悬停放大，点击然后做你想要的动画怎么样？
我宁愿避免使用 Javascript。所以有没有办法用纯 CSS 来实现这一点，不管翻译与否？

标签： html css image hover zooming

【解决方案1】：

将鼠标悬停在图像上时要添加什么：
例如到第一个（我添加类来 cout 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>

【讨论】：

不错！我很感激你的努力！有什么解决方案可以使这个位置独立，从而使图像居中超出原始位置？