CSS PR

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

記事内に商品プロモーションを含む場合があります

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

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

今となってはよく見かけるリンクにカーソルを持っていくとふわっと色が薄くなって光ったように見えるホバーエフェクト!
昔は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;
}

 

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

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。