7月30日の作業データ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>画像にホバーアクション</title> <style> html,body,p{ margin: 0; padding: 0; } img{ vertical-align: bottom; } .wrapper{ width: 1000px; margin: 100px auto 0; display: flex; justify-content: space-between; } .box{ width: 300px; box-sizing: border-box; overflow: hidden; } .box>img{ transition: 0.5s; } .box:hover>img{ transform: scale(1.2); } </style> </head> <body> <div class="wrapper"> <p class="box"><img src="img/01.jpg" alt=""></p> <p class="box"><img src="img/02.jpg" alt=""></p> <p class="box"><img src="img/03.jpg" alt=""></p> </div> </body> </html>
