JIN

JINカスタマイズ|画像がふわっと浮き上がる

画像をふわっとさせるカスタマイズ

画像にマイスをのせたときにフワッとなるようにカスタマイズしました。

カーソルをのせたときに、画像がフワッと浮きます。自作の画像リンクなどに使うといいかもです。

こんな感じにフワッと!
ふわっと
メンくん
フワッとしていい感じだね
くま
白い背景画像にはいいかもね
本物のリンク画像はこちら
フワッとさせてみた画像

カスタマイズの準備

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

投稿画面の画像にクラス名を付ける

クラス名を記入する部分

画像の編集で「画像CSSクラス」の部分にクラス名「img-huwalink」を記入して更新してください。

コードを記入する準備

子テーマを使用している方は、style.cssを開いてください。 追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

/*--------------------------------------
  画像に影をプラス
--------------------------------------*/
.img-huwa, .img-huwalink{
    display: block;
    border-radius: 3px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, .25);
    transition: .3s ease-in-out;
}
.img-huwalink:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}
メンくん
このコードをちょちょいっとコピペしてね
くま
これで簡単にフワッと画像を作れるな

まとめ

画像リンクに使うといいかもですね。

SANGOのメインカスタマイズ(?)サイトはこちら

ここにボックスタイトルを入力

 

関連記事