【Webサイト作成】パララックスサイトのテンプレートを作成　その６

こんにちは朱夏です。

前回の続きを解説していこうと思います。
解説しているマウスホバーのエフェクトはこちらです。

- 拡大+透過調整
- 拡大のみ
- 拡大+グレースケール
- 縦回転出現
- 拡大+階調反転
- 拡大+ブラー

今回は、後半3つの解説をしていきます。

縦回転出現

正確には縦軸回転出現でしたねすみません。
コードはこちらです。

<div class="card m-1 card04">
   <img class="card-img-top cardimg4" src="img/S__25821192.jpg" alt="住宅街">
   <div class="card-body bg-light">
      <p class="card-text">住宅街の写真です。青空が綺麗だったので。</p>
      <p class="card-text">■縦回転出現</p>
   </div>
</div>

<p class="card-text">住宅街の写真です。青空が綺麗だったので。</p>

<p class="card-text">■縦回転出現</p>

</div>

CSSはこちらです。

.card04 > .cardimg4 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    transform: rotate3d(0,1,0,-90deg);
}

.card04:hover > .cardimg4 {
    transform: scale(1.2) rotate3d(0,1,0,0deg);
}

.card04 > .cardimg4 {

max-width: 500px;

height: 300px;

object-fit: cover;

transition: 0.5s;

transform: rotate3d(0,1,0,-90deg);

}

.card04:hover > .cardimg4 {

transform: scale(1.2) rotate3d(0,1,0,0deg);

}

ここは今回の頑張りポイントでした。
先ずはそれぞれの状態を説明します。

通常状態：Y軸で-90度回転した状態
ホバー状態：1.2倍の大きさに拡大、Y軸で0度まで回転

Y軸で-90度回転した状態は、コピー用紙を画像と見立てると、横の側面を見てるような状態です。
なので、厚みが0の電子画像の場合だと完全に見えなくなります。
これをホバー状態の時は0度まで回転させる(通常の表示角度にする)ことで、この動きを作っています。

そして、この視覚効果で拡大をつけてもあまり意味はないなと思いました。反省(；・∀・)

拡大+階調反転

先ずはコードからどうぞ。

<div class="card m-1 card05">
   <img class="card-img-top cardimg5" src="img/S__25821191.jpg" alt="近所">
   <div class="card-body bg-light">
      <p class="card-text">とてもいい天気だった近所の写真です。</p>
      <p class="card-text">■拡大+階調反転</p>
   </div>
</div>

<p class="card-text">とてもいい天気だった近所の写真です。</p>

</div>

CSSです。

.card05 > .cardimg5 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    filter: invert(100%);
}

.card05:hover > .cardimg5 {
    transform: scale(1.2);
    filter: invert(0%);
}

.card05 > .cardimg5 {

max-width: 500px;

height: 300px;

object-fit: cover;

transition: 0.5s;

filter: invert(100%);

}

.card05:hover > .cardimg5 {

transform: scale(1.2);

filter: invert(0%);

}

こちらは、グレースケールと同じfilterで効果をつけています。
今回指定している効果はfilter: invert(100%);です。
これをホバーした時に0%にして効果を解除しています。

通常の状態では見た目がちょっと気持ち悪いくらいのインパクトですが、ホバーした時の動きはいい感じかなとも思います。

拡大+ブラー

見た目をボヤっとさせる効果を付けるブラーです。
先ずはコードをどうぞ。

<div class="card m-1 card06">
   <img class="card-img-top cardimg6" src="img/S__25821190.jpg" alt="大池山荘">
   <div class="card-body bg-light">
      <p class="card-text">初登山のキャンプ地、大池山荘です。</p>
       <p class="card-text">■拡大+ブラー</p>
   </div>
</div>

<p class="card-text">初登山のキャンプ地、大池山荘です。</p>

</div>

CSSです。

.card06 > .cardimg6 {
    width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    filter: blur(5px);
}

.card06:hover > .cardimg6 {
    transform: scale(1.2);
    filter: blur(0);
}