マウスオーバーで背景画像（background-image）を自動スクロールする CSS

2024年6月8日

一定のエリアの中でバックグラウンドに指定したイメージを、マウスオーバーで自動でスクロールさせる方法です。

CSS を使って想像以上に簡単に実現でき、かつ、なかなか面白い演出です。

■ マウスオーバーでイメージがスクロールします

作成方法を紹介します。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 イメージがスクロールするオシャレな例
2 イメージがスクロールする仕組み
3 作成方法
- 3.1 ■ サンプル１：縦にスクロールするパターン
- 3.2 ■ サンプル２：横にスクロールするパターン
4 まとめ：マウスオーバーで背景画像を自動スクロールする CSS

イメージがスクロールするオシャレな例

■ 横幅を広げて、窓から覗くような雰囲気で

■ 横にスクロールするパターン

イメージがスクロールする仕組み

四角い領域（矩形）の中でバックグラウンドイメージをスクロールさせています。

<div> タグで矩形の領域を定義する
バックグラウンドイメージで、縦に（または横に）長い画像を指定する
CSS でマウスオーバー時にスクロールアニメーションさせる

作成方法

■ サンプル１：縦にスクロールするパターン

WordPress の「カスタムHTMLブロック」を用いて、次のコードを埋め込みます。

<div class="myBaseImage">
    <div class="myChildImageScroll" style="background-image: url('https://xxxxxx.com/iamge.jpg')"></div>
</div>

<style>
.myChildImageScroll {
    position: absolute;
    width: 400px;
    height: 300px;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 3s ease-out;
    overflow: hidden;
}

.myChildImageScroll:hover {
    background-position: center 100%;
}

.myBaseImage {
    position: relative;
    width : 400px;
    height : 300px;
    padding : 0;
    border : 1px solid;
}
</style>

<div> タグで、横幅400pc、縦幅300px の矩形を作成
background-image プロパティで画像を指定
position プロパティで div タグと画像を親子関係にして画像の位置を親の div に合わせる
background-position: center 0; 指定で、初期表示時のイメージの縦位置を一番上にする
background-position: center 100%; 指定で、マウスオーバー時の最終の縦位置を一番下（100%）にする
transition: all 3s ease-out; にて、アニメーション（3秒、終点に近いほどゆっくりになる）を指定

画像の URL を取得する方法

画像の URL は、WordPress の管理画面から「メディア」→「ライブラリ」で取得できます。

URL を取得したいイメージの詳細を表示して、ファイルの URL をコピーします。

完成です。プレビューで動作を確認してください。

■ サンプル２：横にスクロールするパターン

WordPress の「カスタムHTMLブロック」を用いて、次のコードを埋め込みます。

<div class="myBaseImage">
     <div class="myChildImageScroll" style="background-image: url('https://xxxxxx.com/image.jpg')"></div>
</div>

<style>
.myChildImageScroll {
    position: absolute;
    width: 400px;
    height: 400px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 2s ease-out;
    overflow: hidden;
    border-radius : 50%;
}

.myChildImageScroll:hover {
    background-position: 100% 0;
}

.myBaseImage {
    position: relative;
    width : 400px;
    height : 400px;
    padding : 0;
    border : 10px solid;
    border-radius : 50%;
}
</style>

<div> タグで、横幅400pc、縦幅400px の矩形を作成
background-image プロパティで画像を指定
position プロパティで div タグと画像を親子関係にして画像の位置を親の div に合わせる
border-radius : 50%; で円形にする（イメージのほうも円形を指定する）
background-position: 0 0; 指定で、初期表示時のイメージの横位置を一番左にする
background-position: 100% 0; 指定で、マウスオーバー時の最終の横位置を一番右（100%）にする
transition: all 3s ease-out; にて、アニメーション（3秒、終点に近いほどゆっくりになる）を指定

完成です。プレビューで動作を確認してください。