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

公開日:2018/09/17 更新日:2021/05/21

マウスオーバーしたときに、画像をぐっとズームアップさせるボタンリンクがあります。

見た目もかっこいいですし、リンク要素だということがわかりやすいです。主要なページへのリンクとして、インパクトのある画像と組み合わせて設置すると効果的です。

そんなズームアップする画像リンクボタンの実装例をご紹介します。

サンプルコード

html

<a href="" class="btn_zoom">
    <img src="sample.jpg" alt="リンク">
    <span>リンク</span>
</a>

CSS

.btn_zoom {
    display: table;
    position: relative;
    color: #fff;
    overflow: hidden;
}
.btn_zoom:hover {
    color: #fff;
}

.btn_zoom > img {
    transition: transform 0.5s;
}

.btn_zoom:hover > img {
    transform: scale(1.2);
}

.btn_zoom > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding-right: 2em;
    font-size: 24px;
    font-weight: bold;
}
.btn_zoom > span::after {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}

仕組み、解説、補足など

マウスオーバー時に、画像に対して「transform: scale(1.2);」と指定することで、画像の中心画像を基点にズームアップします。

単純にズームすると、ボタンのサイズを飛び越して画像が引き伸ばされてしまうので、ボタンに対して「overflow: hidden;」を指定することではみ出した部分が非表示になります。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。