Hover Animation

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素のクラス名に[hover-scaleUp]を付与してください。

            <div class="hover-scaleUp">...</div>
            <img class="hover-scaleUp" src="画像のパス">

CSS

アニメーションの速度やスケール値を変更したい場合はダウンロードしたファイルの値を変更してください。

                .hover-scaleUp {
                    transition: all 300ms; /* アニメーションの時間 */
                }
                
                .hover-scaleUp:hover{
                    transform: scale(1.2); /* ホバーした時のスケール値 */
                }

HTML

任意の要素のクラスに[hover-scaleDown]を付与してください。

                <div class="hover-scaleDown">
                    ...
                </div>

CSS

アニメーションの速度やスケール値を変更したい場合はダウンロードしたファイルの値を変更してください。

                .hover-scaleDown {
                    transition: all 300ms;
                }
                
                .hover-scaleDown:hover {
                    transform: scale(0.8);
                }

HTML

任意の要素のクラス名に[hover-scaleUp]を付与してください。

                <div class="hover-scaleUp-overflow"></div>

CSS

アニメーションの速度やスケール値を変更したい場合はダウンロードしたファイルの値を変更してください。

                .hover-scaleUp-overflow {
                    overflow: hidden;
                    & > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transform: scale(1.0); /* アニメーションの速度 */
                        transition: all 300ms;
                    }
                }
                
                .hover-scaleUp-overflow:hover {
                    & > img {
                        transform: scale(1.2); /* 変化するスケール値 */
                    }
                }

HTML

任意の要素のクラス名に[hover-scaleDown-overflow]を付与してください。

                <div class="hover-scaleDown-overflow"></div>

CSS

アニメーションの速度やスケール値を変更したい場合はダウンロードしたファイルの値を変更してください。

                .hover-scaleDown-overflow {
                    overflow: hidden;
                    & > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transform: scale(1.2); /* 変化するスケール値 */
                        transition: all 300ms; /* アニメーションの速度 */
                    }
                }
                
                .hover-scaleDown-overflow:hover {
                    & > img {
                        transform: scale(1.0);
                    }
                }