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>