【CSS hoverエフェクト】クールなマウスオーバーアニメーションのコピペ集

ソースのコピペですぐ使えるマウスオーバーアニメーションについての解説とデモになります。

今回は忙しい人用にjsは使用せずにCSSの:hoverのみで作成しました。

普段のコーディングでマウスオーバーアニメーションを作成するときに1から作るのちょっとだるいなっていうことありますよね。自分用としてもほしかったのですぐ使えるようにコピペ用ソースをまとめました。

デザインは実践あるあるでほんとに使えそうなクールで実用的なものに絞ってみました。
読み込みファイルもいらないので試してみてください。

• ボタンのhoverアニメーション
• • フェード（fade）
  • スライドアニメーション
  • スライドアニメーション（グラデ＆ななめ）
  • ボタンの周りを枠線で囲むアニメーション
  • ボタンの周りを枠線で囲むアニメーション別パターン
  • グラデーションの色が変わる
• サムネイルのhoverアニメーション
• • グレースケール→ 元の色見へ
  • 明度が上がる
  • 画像の拡大
  • 画像の上に背景付きテキストがふわっと重なる
  • 画像の下から背景付きテキストがスライドしてくる
  • 画像の左から背景付きテキストが50％だけスライドしてくる
  • いろいろ組み合わせアニメーション
• まとめ

ボタンのhoverアニメーション

フェード（fade）

ちょっと物足りないですがまずは基本のfadeアニメーションボタンです。

フェードアニメーション

<div class="button_fade01">
<a href="#" class="on_mouse_animetion_01">フェードアニメーション</a>
</div>

.button_fade01 a{
    padding: 30px;
  text-align: center;
    display: block;
    background: #000;
    color: #fff;
    transition: all 0.3s;
    text-decoration: none;
}
.button_fade01 a:hover{
    background: #999;
}

スライドアニメーション

左から右へ色が変わります。このへんからコピペしたいですね。

スライドアニメーション

<div class="button_slide02">
<a href="#" class="on_mouse_animetion_01">スライドアニメーション</a>
</div>

.button_slide02 a{
    padding: 30px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.button_slide02 a::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #999;
    transition: transform .3s;
    content: "";
    transform-origin: right top;
    transform: scale(0, 1);
}
.button_slide02 a::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: #000;
    content: "";
}
/* hover */
.button_slide02 a:hover:before{
    transform-origin: left bottom;
    transform: scale(2, 2);
    content: "";
}

スライドアニメーション（グラデ＆ななめ）

グラデーションと角度を付けたスライドアニメーションです。

スライドアニメーション　ななめ

<div class="button_slide01">
<a href="#" class="on_mouse_animetion_01">スライドアニメーション　ななめ</a>
</div>

.button_slide01 a{
    padding: 30px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.button_slide01 a::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgb(40,174,201);
    background: linear-gradient(45deg,  rgba(40,174,201,1) 0%,rgba(126,93,173,1) 100%);
    transition: transform .3s;
    content: "";
    transform-origin: right top;
    transform: skewX(45deg) scale(0, 1);
}
.button_slide01 a::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: #000;
    content: "";
}
/* hover */
.button_slide01 a:hover:before{
    transform-origin: left bottom;
    transform: skewX(30deg) scale(2, 2);
    content: "";
}

ボタンの周りを枠線で囲むアニメーション

マウスオーバー時に枠線で囲むアニメーションです。左上から描画がスタートされます。

これは個人的に欲しかったhoverエフェクトです。

LINEアニメーション01

<div class="button_line01">
<a href="#" class="on_mouse_animetion_01">LINEアニメーション01
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
</div>

.button_line01 a{
    padding: 30px;
    text-align: center;
    color: #000;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.button_line01 a .top{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 100ms;
    width: 100%;
    background: #000;
    transform: scale(0, 0);
    height: 2px;
    transform-origin: left top;
    transition-delay: 0ms;
}
.button_line01 a .right{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: transform 100ms;
    content: "";
    width: 2px;
    background: #000;
    transform: scale(0, 0);
    height: 100%;
    transform-origin: right top;
    transition-delay: 50ms;
    display: block;
}
.button_line01 a .bottom{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    transition: transform 100ms;
    content: "";
    width: 100%;
    background: #000;
    transform: scale(0, 0);
    height: 2px;
    transform-origin: right bottom;
    transition-delay: 100ms;
    display: block;
}
.button_line01 a .left{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 100ms;
    content: "";
    width: 2px;
    background: #000;
    transform: scale(0, 0);
    height: 100%;
    transform-origin: left bottom;
    transition-delay: 150ms;
    display: block;
}
.button_line01 a::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    content: "";
    background: #f7f7f7;
}
/* hover */
.button_line01 a:hover .top{
    transform-origin: left top;
    transform: scale(1, 1);
    content: "";
}
.button_line01 a:hover .right{
    transform-origin: left top;
    transform: scale(1, 1);
}
.button_line01 a:hover .bottom{
    transform-origin: right bottom;
    transform: scale(1, 1);
}
.button_line01 a:hover .left{
    transform-origin: left bottom;
    transform: scale(1, 1);
}

ボタンの周りを枠線で囲むアニメーション別パターン

枠線のアニメーションが上下左右同時に開始されるパターンです。

LINEアニメーション02

<div class="button_line02">
<a href="#" class="on_mouse_animetion_01">LINEアニメーション02
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</a>
</div>

.button_line02 a{
    padding: 30px;
    text-align: center;
    color: #000;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  text-decoration: none;
}
.button_line02 a .top{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 300ms;
    width: 100%;
    background: #000;
    transform: scale(0, 0);
    height: 2px;
    transform-origin: left top;
    transition-delay: 0ms;
}
.button_line02 a .right{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: transform 300ms;
    content: "";
    width: 2px;
    background: #000;
    transform: scale(0, 0);
    height: 100%;
    transform-origin: right top;
    transition-delay: 0ms;
    display: block;
}
.button_line02 a .bottom{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    transition: transform 300ms;
    content: "";
    width: 100%;
    background: #000;
    transform: scale(0, 0);
    height: 2px;
    transform-origin: right bottom;
    transition-delay: 0ms;
    display: block;
}
.button_line02 a .left{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 300ms;
    content: "";
    width: 2px;
    background: #000;
    transform: scale(0, 0);
    height: 100%;
    transform-origin: left bottom;
    transition-delay: 0ms;
    display: block;
}

.button_line02 a::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    content: "";
    background: #f7f7f7;
}
/* hover */
.button_line02 a:hover .top{
    transform-origin: left top;
    transform: scale(1, 1);
    content: "";
}
.button_line02 a:hover .right{
    transform-origin: left top;
    transform: scale(1, 1);
}
.button_line02 a:hover .bottom{
    transform-origin: right bottom;
    transform: scale(1, 1);
}
.button_line02 a:hover .left{
    transform-origin: left bottom;
    transform: scale(1, 1);
}

グラデーションの色が変わる

マウスオーバーするとグラデーションの色が変わるアニメーションです。

グラデアニメーション01

<div class="button_gradation01">
<a href="#" class="on_mouse_animetion_01">グラデアニメーション01</a>
</div>

.button_gradation01 a{
    padding: 30px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.button_gradation01 a::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgb(40,174,201);
    background: linear-gradient(45deg,  rgba(40,174,201,1) 0%,rgba(126,93,173,1) 100%);
    transition: transform .3s;
    content: "";
    width: 100%;
    height: 800%;
    transform: translateY(0%);
}
/* hover */
.button_gradation01 a:hover::before{
    transform: translateY(-80%);
}

サムネイルのhoverアニメーション

グレースケール→ 元の色見へ

マウスオーバーするとグレースケールから元の色見にアニメーションします。

<a href="#" class="wrap-img-hover-01">
    <figure><img src="img/img01.jpg" alt=""></figure>
</a>

.wrap-img-hover-01{
    width: 300px;
    display: block;
}
.wrap-img-hover-01 img{
    transition: all .3s;
    filter: grayscale(90%);
}
.wrap-img-hover-01 img:hover{
    filter: grayscale(0%);
}

明度が上がる

マウスオーバーすると明度が上がります。

<a href="#" class="wrap-img-hover-02">
    <figure><img src="img/img02.jpg" alt=""></figure>
</a>

.wrap-img-hover-02{
    width: 300px;
    display: block;
}
.wrap-img-hover-02 img{
    transition: all .3s;
}
.wrap-img-hover-02 img:hover{
    filter: brightness(120%);
}

画像の拡大

マウスオーバーすると画像が拡大されます。

<a href="#" class="wrap-img-hover-03">
    <figure><img src="img/img03.jpg" alt=""></figure>
</a>

.wrap-img-hover-03{
    width: 300px;
    display: block;
}
.wrap-img-hover-03{
    overflow: hidden;
}
.wrap-img-hover-03 img{
    transition: all .3s;
}
.wrap-img-hover-03:hover img{
    transform: scale(1.2,1.2);
    transform-origin: center center;
}

画像の上に背景付きテキストがふわっと重なる

マウスオーバーすると画像の上に背景付きテキストがふわっと現れます。

CLICK
This is a sample text message.

<div class="wrap-img-hover-04">
<a href="#">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nanzaburo/20230302/20230302120550.jpg" alt="">
<span class="figcaption"><p>CLICK <br>This is a sample text message.</p></span>
</a>
</div>

..wrap-img-hover-04{
   width: 300px;
   display: block;
}
.wrap-img-hover-04 a{
   display: block;
 overflow: hidden;
   position: relative;
}
.wrap-img-hover-04 a img{
   display: block;
}
.wrap-img-hover-04 a .figcaption{
   display: block;
 transition: all .3s;
    opacity: 0;
 background: rgba(0,0,0,0.7);
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
   color: #fff;
}
.wrap-img-hover-04 a:hover .figcaption{
    opacity: 1;
}
.wrap-img-hover-04 a .figcaption p{
 display: block;
 position: absolute;
 top: 50%;
   left: 50%;
  transform: translate(-50%,-50%);
    text-align: center;
 width: 90%;
}

画像の下から背景付きテキストがスライドしてくる

マウスオーバーすると背景付きテキストが下からスライドしてきます。

CLICK
This is a sample text message.

<div class="wrap-img-hover-05">
<a href="#">
   <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nanzaburo/20230302/20230302120556.jpg" alt="">
 <span class="figcaption"><p>CLICK <br>This is a sample text message.</p></span>
</a>
</div>

.wrap-img-hover-05{
 width: 300px;
   display: block;
}
.wrap-img-hover-05 a{
   display: block;
 overflow: hidden;
   position: relative;
}
.wrap-img-hover-05 img{
 display: block;
}
.wrap-img-hover-05 a .figcaption{
   transition: all .3s;
    opacity: 0.5;
   background: rgba(0,0,0,0.7);
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
   display: block;
 color: #fff;
    transform: translateY(100%);
}
.wrap-img-hover-05 a:hover .figcaption{
    transform: translateY(0);
   opacity: 1;
}
.wrap-img-hover-05 a .figcaption p{
 display: block;
 position: absolute;
 top: 50%;
   left: 50%;
  transform: translate(-50%,-50%);
    text-align: center;
 width: 90%;
}

画像の左から背景付きテキストが50％だけスライドしてくる

マウスオーバーすると背景付きテキストが左からいい感じのところまでスライドします。

CLICK
This is a sample text message.

<div class="wrap-img-hover-06">
<a href="#">
   <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nanzaburo/20230302/20230302120534.jpg" alt="">
 <span class="figcaption"><p>CLICK <br>This is a sample text message.</p></span>
</a>
</div>

.wrap-img-hover-06{
 width: 300px;
   display: block;
}
.wrap-img-hover-06 a{
   display: block;
 overflow: hidden;
   position: relative;
}
.wrap-img-hover-06 a img{
   display: block;
}
.wrap-img-hover-06 a .figcaption{
   transition: all .3s;
    opacity: 0.5;
   background: rgba(0,0,0,0.7);
    position: absolute;
 top: 0;
 left: 0;
    width: 50%;
 height: 100%;
   display: block;
 color: #fff;
    transform: translateX(-100%);
}
.wrap-img-hover-06 a:hover .figcaption{
   transform: translateX(0);
   opacity: 1;
}
.wrap-img-hover-06 a .figcaption p{
 display: block;
 position: absolute;
 top: 50%;
   left: 50%;
  transform: translate(-50%,-50%);
    text-align: center;
 width: 90%;
}

いろいろ組み合わせアニメーション

マウスオーバーすると背景付きテキストが下からスライドし、且つ画像が拡大されます。

マウスオーバー前に黒背景がちょっと見切れてる場合は以下の様に調節するとよいです。
transform: translateY(101%);

CLICK
This is a sample text message.

<div class="wrap-img-hover-07">
<a href="#">
   <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nanzaburo/20230302/20230302120539.jpg" alt="">
 <span class="figcaption"><p>CLICK <br>This is a sample text message.</p></span>
</a>
</div>

.wrap-img-hover-07{
 width: 300px;
   display: block;
}
.wrap-img-hover-07 a{
   display: block;
 overflow: hidden;
   position: relative;
}
.wrap-img-hover-07 a .figcaption{
   transition: all .3s;
    opacity: 0.5;
   background: rgba(0,0,0,0.7);
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
   display: block;
 color: #fff;
    transform: translateY(101%);
}
.wrap-img-hover-07 a:hover .figcaption{
    transform: translateY(0);
   opacity: 1;
}
.wrap-img-hover-07 a .figcaption p{
 display: block;
 position: absolute;
 top: 50%;
   left: 50%;
  transform: translate(-50%,-50%);
    text-align: center;
 width: 90%;
}
.wrap-img-hover-07 a img{
   transition: all .3s;
    display: block;
}
.wrap-img-hover-07 a:hover img{
 transform: scale(1.2,1.2);
  transform-origin: center center;
}

順番的に最後になってしまいましたがこれが自分的にはよく使いそうです。

まとめ

今回はcssアニメーションではなくトランジションのみを使用することでちょっと面倒な@keyframesの設定をしないで済むように工夫しました。

ホバーエフェクトにもひと手間かけるだけでサイトの印象も変わると思います。

ほばあほばあほばあ♪