リンクや画像などのホバーをCSSのみで光ったように見せる方法【JS不要】

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

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

 

 

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

<div class="link"><a href="#">りんく</a></div>
.link{
  width: 100px;
  background-color: #000;
}

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

.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; /*0〜1で好きな薄さに調整する。*/
}

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

 

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

コメント