みなさん、おはようございます！こんにちは！こんばんは！
りんごちゃんです。
さて、梅雨もあっっっっっというまに空けてしまって、スタイルを気にする季節がやってきましたね。みなさん、ちゃんと水分補給しなきゃダメですよ？熱中症には気をつけてくださいね！エアコンのかけ過ぎにも注意！！
もう学生たちは、夏休みとかに差し掛かってきているのですかね〜羨ましいです。( ；´Д｀)
海とかにも行きたいですねーそのためにはダイエットもしなくちゃですけど( ；´Д｀)
ではでは、本題に入りますか！
題名にもあるようにちょっと流行りに乗ってみました！
いま、当サプライドが8月に５周年になるので、それに向けて、サイトをリニューアルしちゃいます！それで、今はどんなサイトが流行りなのか調べてみました！
するとこちらが出てきました
↓
画像をスタイルでグレーにして、カーソルが重なった時にカラーになる。
もう一つは画像が少し大きくなるんですよ！表示されている画像の大きさは変わらないので、中にある画像がブワンと大きくなる動きが意外と面白い。
では、コーディングして行きましょう。
まずは、htmlはこんな感じです画像をdivで囲んで
|
1 2 3 4 5 |
//html <div class="waku"> <img class="img_1" src="img_1.png" /> </div> |
CSSでまず外で囲んでるクラスwakuに幅高さを決めて（基本的には画像に合わせて作った方がいいです）、display:block;をかけて、下の三行を入れるだけです！
|
1 2 3 4 5 6 7 8 9 |
//css .waku { width:600px; height:450px; display:block; -webkit-filter: grayscale(1); filter: gray; filter: grayscale(1); } |
これでまずは、画像がグレーになります。()のなかの1は、グレー100％を示しています。
次にカーソルが重なった（以降ホバー）時にグレーのフィルターを外します。
|
1 2 3 4 |
.img:hover{-webkit-filter: grayscale(0); filter: none; filter: grayscale(0); } |
()のなかの１を０にするだけですね。
これだけだとホバーした時にパッとカラーに変わるのでそこで！
これですよ！
transition-duration: 1s;
このコードをそれぞれのスタイルにかけるとふわ〜をカラーになったりグレーになったりします。
これで画像をグレーにしまくれますね！
では、次に中の画像をホバーした時に大きくしましょう！
ここでは、中のimgをいじります。
|
1 2 3 4 5 6 7 8 9 10 11 |
img { width:100%; transform: scale(1.1); /*divとの間に空白ができないように大きくしています*/ transition-duration: 1s; /*変化に掛かる時間*/ } img:hover { width:100%; transform: scale(1.2); /*画像の拡大率*/ transition-duration: 1s; /*変化に掛かる時間*/ } |
まずは、画像自体にtransition-durationを指定します。ここで、枠と画像との間に余白が入っていると見栄えが良くないので、0.1％ほど大きくしています。ここは好みです。
次にホバーした時にtransform: scaleで画像のサイズを大きくしています。1は100%のサイズをしているので、それより大きくしたい場合は1以上の数値にそれより小さくしたい場合は、1より小さい数値に指定したらオッケーです。
これで終わりじゃないですよ。これを忘れちゃダメですよ！
|
1 |
overflow: hidden; |
この一文をdivに書き忘れるとdivからはみ出ても表示されちゃいますので、気をつけてくださいね！
これで完成です♪
これひとつ入れておくだけでも流行りに乗っかったサイトになるでしょう〜〜〜☆*:.｡. o(≧▽≦)o .｡.:*☆
では、失礼します。まったね〜〜〜♪