エントリーカードにカーソルをあわせるとふわっとさせるCSSについて

Simplicityの特徴 フォーラム Simplicityについての質問 エントリーカードにカーソルをあわせるとふわっとさせるCSSについて

このトピックには6件の返信が含まれ、1人の参加者がいます。2 ヶ月、 4 週間前 Akira さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59659 返信

    おさるさん

    はじめまして。初心者で、今カスタマイズをし始め出したところで、初歩時な質問かと思いますが、
    .page-index .entry:hover {
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
    transform: translateY(-4px);
    transition: 0.2s;
    background: #fff;
    }
    このCSSをsimplicityのエントリカードに適用させる場合どのように書き換えたらよろしいでしょうか?
    どうぞよろしくお願い致します。

  • #59662 返信

    Akira

    simplicity のエントリカードは、どのテーマ設定にしているかで HTML が異なります。

    二度手間にならないために、サイトの URL をご提示いただけるでしょうか。

  • #59691 返信

    おさるさん

    昨日ちょうど、akira様のホームページを拝見させて頂き、エントリーカードを揃えた2段にさせて頂いた所でした!!ありがとうございました。サイトですが、https://heart-to-heart.jp/になります。どうぞよろしくお願い致します。

  • #59702 返信

    かうたっく

    ちなみにどの場所(ウィジェット)ですか?ウィジェットが沢山はいってますが(ウィジェットしかないってないですが)、どれのスタイルを変えたいか具体的に書いていただけますか。

  • #59712 返信

    Akira

    ご参考くださり、ありがとうございます。

    下記の CSS でいけるはずです。

    #main .entry:hover {
      box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
      transform: translateY(-4px);
      transition: 0.2s;
      background: #fff;
    }

    現在ピンク色の影をご指定になられていますが、その影と同じ大きさでホバーアニメーションが発生します。

    もし、ピンク色の影やホバーアニメーションが大きいなとお感じになる場合には、「エントリーカード全体をリンク化」を有効にされるといいかもしれません。有効にすると、 #ddd で指定されている薄いグレーの枠線と同じ大きさの影やホバーアニメーションが可能です。

    ただし、 CSS の変更が必要になると思います。特に Flexbox で 2 列にされている指定は、間違いなく変更が必要です。

    プロフィール画像のアニメーションが良いですね!

  • #59747 返信

    おさるさん

    かうたっく様 Akira様 ご返信ありがとうございます。

    Akira様 ご丁寧にコードまで教えて頂き誠にありがとうございました。
    コードをそのまま、張り付けさせていただいたところ、うまくふわっとが作動しませんでした。
    多分色々CSSを書いているのが原因だと思いますので、もう少し自分で勉強致します。
    本当にお教えいただきありがとうございました。

  • #59750 返信

    Akira

    なるほど!ふわっとですね。

    https://heart-to-heart.jp/category/wordpress のページを見てみると、ふわっとではなく、しゃきーんという感じですね。

    ふわっとさせるためには、まず #59712 の CSS を以下のものに変更します。

    #main .entry:hover {
      box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
      transform: translateY(-4px);
      background: #fff;
    }

    以前の CSS から、 transition: 0.2s; を削除しています。

    次に、以下の CSS を追加します。

    #main .entry {
      transition: .4s cubic-bezier(.4, 0, .2, 1);
    }

    .4s ( 0.4 秒をかけてホバーアニメーションを表現する)を変更することで、ふわっと感を調整できます。

    たぶん、ホバーアニメーションの速さをおっしゃっていると思うのですが、違ったらごめんなさい。

返信先: エントリーカードにカーソルをあわせるとふわっとさせるCSSについて
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)