リンクや画像などのhoverをCSSのみで光ったように見せる方法｜カケウェブ

ここではリンクテキストやバナーなどをマウスをhoverすることで、光ったようにみれる方法を紹介します。
今回はCSSのだけで実装可能です。

リンクホバーを光らせる方法

今となってはよく見かけるリンクにカーソルを持っていくとふわっと色が薄くなって光ったように見えるホバーエフェクト！
昔はjQueryのプラグインなどで実装したりしていましたが、今となってはCSS3で簡単に実装できてしまいます。
脱jQueryの流行りの中でも初歩的で一瞬でできる方法なので、まだｊQueryで実装している方やこれからやってみようと思っている方はぜひ実装してみてください。

濃度を下げて光ったように見せる


<div class="link"><a href="#">りんく</a></div>

.link{
  width: 100px;
  background-color: #000;
}

.link:hover{
  opacity: 0.5; /*０〜１で好きな薄さに調整する。*/
}

.link a{
  padding: 10px 0;
  display: block;
  color: #FFF;
}

これで簡単に光ったように見せることができます。
でも、ちょっと早く切り替わり過ぎでは・・・？
そうです。早く変わりすぎて使いにくい！

時間をかけて濃度を下げて光ったように見せる


<div class="link"><a href="#">りんく</a></div>

.link{
  width: 100px;
  background-color: #000;
  transition: 1.0s; /*何秒かけて色を変えるか指定する。*/
}

.link:hover{
  opacity: 0.5; /*０〜１で好きな薄さに調整する。*/
}

.link a{
  padding: 10px 0;
  display: block;
  color: #FFF;
}

「transition」で変化する時間指定して濃度を変更しています。
どんな要素にも使用できるので覚えていると便利なテクニックです！
自分好みの薄さ、速さにしてサイトに動きをつけてみよう！