ミギムキ

[CSS] マウスオーバーで画像をズームアップするボタンリンクを設置したい

やりたいこと

サンプルコード

html

<a href="#" class="btn_zoom"> <img src="sample.jpg" alt=""> <p>リンク</p> </a>
スポンサー広告

CSS

.btn_zoom { position: relative; overflow: hidden; } .btn_zoom:link, .btn_zoom:visited, .btn_zoom:active, .btn_zoom:hover { color: #191d1f; text-decoration: none; } .btn_zoom > img { transition-duration: 0.5s; } .btn_zoom:hover > img { transform: scale(1.2); } .btn_zoom > p { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 0.5em; background-color: #3388dd; color: #fff; text-align: center; }

仕組み、解説、補足など

スポンサー広告