ブログカスタマイズ

画像にマウスオーバーした時に透過ではなく「グレースケール」にするCSSの紹介

投稿日: 更新日: 2017年10月24日

このブログではなくて、仕事として作っているウェブにちょっとした問題が発生して12時間以上ぶっ通しで作業した勢いでこの記事を書き始めたでででーさん(@d3_dayo)です!

予期せぬトラブルというのはツライものですな!夜中に実は問題が生じていることにシレッと気づいて、今日はずっと夜中から作業していました(^_^;)

改めて、バックアップのとり方だったり、諸々のリスクヘッジについて考えさせられたので、たまには良からぬトラブルも良い経験になることでしょう!

ブログを書いている皆様におかれましても…特にデザインをカスタマイズするのが好きだという方は、手慣れていたとしてもバックアップは忘れずにとるようにしましょう(笑)その本当にちょっとした手間が、もしも何かあった時に…必ず自分を助けてくれるはずです!

さて、今日はさすがにちょっとヘロヘロなんですが、それでも記事更新はまだまだ毎日続けたいよということで、思考停止で書くことができるネタになってしまい申し訳ありませんが、今日は1つCSSでも紹介しようと思います。


画像にマウスオーバーすると、その画像が透過されて白い膜に覆われたような感じになる、このマウスオーバー効果はよく見かけると思います。

このマウスオーバー時の透過効果をガッツリとブログ内の画像全体に適用する際のCSSは以下です。

その昔、ホームページ(静的ページ)を弄りだした頃は、単純な透過でもかなりすごいって感動しまくったことを憶えています!しかし、それから10年以上は余裕で経ってるので…もう、さすがに、毎度毎度この効果、個人的には飽きてきていますΣ(´∀`;)

なので、今回は私が最近ハマっている(なんとなく好き)マウスオーバーすると画像がモノクロになる効果のCSSを紹介したいと思います!ガッツリと画像全体に適用するだけなら、この記事に掲載するコードのコピペだけでOKです。

マウスオーバーした画像がモノクロになるCSS

「transition:0.5s」の部分は数字を「0.9」とか大きくすると、よりフワっとした色変化に見えます。

上記のコードをはてななら管理画面から「デザインCSS」に貼り付けるだけで、ブログに挿入している画像にマウスオーバーした際にモノクロのエフェクトがかかるようになります。

あとは最近トップページの記事一覧をカード型で1列2記事表示にしているブログをけっこう見かけるので(このブログもそうです)そのレイアウトにしている場合の、アイキャッチ画像にマウスオーバーした際、モノクロになるようにするためのコードも載せておきますね。

この山形の人 (id:igube)のブログとか、まさにカード型の記事一覧にしていますが、アイキャッチにマウスオーバーしても何も反応がないのもちょっとした違和感をおぼえる時があるので…ぜひ、試してみてくださいね(名指しで試せという司令を送ってるようなものですねww)

というわけで、今回はマウスオーバーした画像がモノクロになるCSSを紹介しました。あ、もちろん!はてな以外でも使えますからね(笑)

はてな以外の人もぜひぜひ試してみてください(^^)

もし、部分的にこの効果を施したくて、でもCSSでどこを指定していいのかわからない場合などは、コメントかツイッターでご質問頂ければ回答します!

ちなみに…Milliardで関連記事を表示している人は(そしてパネル表示にしている人)はちょっとこれを使用する時は気をつけたほうが良い感じです。というのも、Milliardのパネル表示だと記事カード上にタイトルが表示されますが、このコードとバッティングしてうまく表示されなくなる可能性があります。MilliardのほうCSSで弄れば問題はないのですが…面倒くさいと思うので…Σ(´∀`;)

他にもカスタマイズ関係で役立つかもしれない記事はこんなのもあります!

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ