一、效果
二、代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { width: 300px; height: 150px; overflow: hidden; margin: 0 auto; } img { width: 400px; height: 200px; } span { color: #fff; display: block; padding: 75px 110px; } img:hover { width: 400px; height: 200px; transform: scale(2.05, 2.05); } /* 中心變形*/ img { transition: all 0.5s ease-out; /* 過度 所有css屬性 1秒過度 結束慢*/ -moz-transition: all 0.5s ease-out; /* Firefox 4 */ -webkit-transition: all 0.5s ease-out; /* Safari 和 Chrome */ -o-transition: all 0.5s ease-out; /* Opera */ } </style> </head> <body> <div> <img src="images/new-two.jpg" /> </div> </body> </html>
三、借鑒