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

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

  • このトピックには6件の返信、1人の参加者があり、最後にAkiraにより1年、 10ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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 秒をかけてホバーアニメーションを表現する)を変更することで、ふわっと感を調整できます。

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

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




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