2026年 コピペで使える CSS 画像 ホバー アニメーション ８選

戦士

2026年 最新版 コピペで使える css ホバーアニメーション

画像にclass指定で使えるcss ホバーアニメーション

テーマcocoonだと追加CSSにコードを追加＞投稿画面で画像追加＞画像の高度な設定＞追加cssクラスにクラス名を入れるだけで設置完了！

ズーム

戦士
.wp-block-image.hover-zoom img{
    transition: transform .5s ease;
}

.wp-block-image.hover-zoom:hover img{
    transform: scale(1.12);
}

少し浮き上がる（高級感）

戦士
.wp-block-image.hover-float img{
    transition: .4s ease;
}

.wp-block-image.hover-float:hover img{
    transform: translateY(-10px);
}

ズーム＋回転

戦士
.wp-block-image.hover-rotate img{
    transition: .5s ease;
}

.wp-block-image.hover-rotate:hover img{
    transform: rotate(3deg) scale(1.05);
}

Glow（発光）

戦士
.wp-block-image.hover-glow img{
    transition: .4s ease;
}

.wp-block-image.hover-glow:hover img{
    box-shadow: 0 0 25px rgba(0,150,255,.6);
}

Gray→Color

戦士
.wp-block-image.hover-gray img{
    filter: grayscale(100%);
    transition: .5s ease;
}

.wp-block-image.hover-gray:hover img{
    filter: grayscale(0%);
}

Tilt（3D傾き）

戦士
.wp-block-image.hover-tilt{
    perspective: 1000px;
}

.wp-block-image.hover-tilt img{
    transition: .5s ease;
}

.wp-block-image.hover-tilt:hover img{
    transform: rotateX(6deg) rotateY(-6deg) scale(1.05);
}

Shine（光が流れる）

戦士
.wp-block-image.hover-shine{
    position: relative;
    overflow: hidden;
}

.wp-block-image.hover-shine::before{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );
    transform: skewX(-25deg);
}

.wp-block-image.hover-shine:hover::before{
    animation: shine .8s;
}

@keyframes shine{
    100%{
        left: 150%;
    }
}

Premium

戦士
.wp-block-image.hover-premium{
    transition: .4s ease;
}

.wp-block-image.hover-premium img{
    transition: .5s ease;
}

.wp-block-image.hover-premium:hover{
    transform: translateY(-10px);
}

.wp-block-image.hover-premium:hover img{
    transform: scale(1.08);
    filter: brightness(1.1);
}

ホーム