【コピペOK】画像にホバーした時のCSSアニメーション20選

RELEASE / 2024.6.8 UPDATE / 2024.06.07

css

アニメーション

コピペ

ホバー

画像

Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。
デザイナーからホバーアニメーションが指定されていない場合、どんなアニメーションを指定しようか迷ってしまうことがよくあります。

そんな時のためにコピペですぐに使える画像にホバーした時のCSSアニメーションを20種類まとめてみました。

HTMLは以下のタグ構造を想定しています。

<figure class="image">
    <a href="#"><img src="https://irodori-design-web.com/blog_image/2958/2958.jpg"></a>
</figure>

この記事では、ホバーした時にタイトルが表示されたり、他の画像が切り替わったりするアニメーションは取り扱っていません。

半透明にする

ホバーした時に画像を半透明にする場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    opacity: .6;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ズームする

ホバーした時に画像をズームにする場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: scale(1.1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ズームアウトする

ホバーした時に画像をズームアウトにする場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    transform: scale(1.1);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: scale(1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

枠線を付ける

ホバーした時に画像に枠線を付ける場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    position: relative;
}
.image a::before{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 #dc5a45, inset 0 0 #dc5a45, inset 0 0 #dc5a45, inset 0 0 #dc5a45;
    transition: all .3s ease-in-out;
    display: block;
    content: "";
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover::before{
    box-shadow: inset 5px 0 #dc5a45, inset 0 5px #dc5a45, inset -5px 0 #dc5a45, inset 0 -5px #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

シャドーをかける

ホバーした時に画像にシャドーをかける場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    box-shadow: 0 0 0 rgba(0,0,0,.25);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    box-shadow: 0 0 10px rgba(0,0,0,.25);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

浮かせる

ホバーした時に画像を浮かせる場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    box-shadow: 0 5px 5px rgba(0,0,0,.1);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 10px rgba(0,0,0,.2);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸にする

ホバーした時に画像を角丸する場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    overflow: hidden;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    border-radius: 20px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

モノクロ（白黒）にする

ホバーした時に画像をモノクロ（白黒）にする場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    filter: grayscale(1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

モノクロ（白黒）→カラーにする

ホバーした時に画像をモノクロ（白黒）→カラーにする場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    filter: grayscale(1);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    filter: grayscale(0);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかす

ホバーした時に画像をぼかす場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    filter: blur(2px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかした状態から元に戻す

ホバーした時にぼかした状態の画像を元に戻す場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    filter: blur(2px);
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    filter: blur(0);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

回転させる（左右）

ホバーした時に画像を左右に回転させる場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: rotateY(-180deg);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

回転させる（上下）

ホバーした時に画像を上下に回転させる場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: rotateX(-180deg);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

半透明の色を表示（パターンA）

ホバーした時に画像の上に半透明の色を表示させる場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    position: relative;
}
.image a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover::before{
    opacity: .6;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

半透明の色を表示（パターンB）

ホバーした時に画像の上に半透明の色を表示させるもうひとつのサンプルはこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    position: relative;
}
.image a::before{
    content: "";
    display: block;
    width: 0%;
    height: 0%;
    background: #dc5a45;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover::before{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .6;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

点滅させる

ホバーした時に画像を点滅させる場合はこちら。

.image{
    width: 250px;
}
.image16 a{
    display: block;
    position: relative;
}
.image a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover::before{
    animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .6;
    }
    100% {
        opacity: 0;
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストを表示する

ホバーした時に画像の上にテキストを表示する場合はこちら。

.image{
    width: 250px;
}
.image a{
    display: block;
    position: relative;
}
.image a::before{
    content: "VIEW";
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
}
.image a:hover::before{
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

拡大＋モノクロ（白黒）からカラーにする

ホバーした時に画像を拡大しつつモノクロ（白黒）からカラーにする場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    filter: grayscale(1);
}
.image img{
    width: 100%;
    vertical-align: middle;
}

.image a:hover{
    transform: scale(1.1);
    filter: grayscale(0);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

拡大＋半透明の色を表示

ホバーした時に画像を拡大しつつ画像の上に半透明の色を表示させる場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
    position: relative;
}
.image a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    transform: scale(1.1);
}
.image a:hover::before{
    opacity: .6;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかし＋モノクロ（白黒）にする

ホバーした時に画像をぼかししつつモノクロ（白黒）にする場合はこちら。

.image{
    width: 250px;
    overflow: hidden;
}
.image a{
    display: block;
    transition: all .3s ease-in-out;
}
.image img{
    width: 100%;
    vertical-align: middle;
}
.image a:hover{
    filter: blur(2px) grayscale(1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.