Simplicityの特徴 › フォーラム › Simplicityについての質問 › エントリーカードにカーソルをあわせるとふわっとさせるCSSについて
- このトピックには6件の返信、1人の参加者があり、最後にAkiraにより5年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
おさるさんゲスト
はじめまして。初心者で、今カスタマイズをし始め出したところで、初歩時な質問かと思いますが、
.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のエントリカードに適用させる場合どのように書き換えたらよろしいでしょうか?
どうぞよろしくお願い致します。 -
Akiraゲスト
simplicity のエントリカードは、どのテーマ設定にしているかで HTML が異なります。
二度手間にならないために、サイトの URL をご提示いただけるでしょうか。
-
おさるさんゲスト
昨日ちょうど、akira様のホームページを拝見させて頂き、エントリーカードを揃えた2段にさせて頂いた所でした!!ありがとうございました。サイトですが、https://heart-to-heart.jp/になります。どうぞよろしくお願い致します。
-
かうたっくゲスト
ちなみにどの場所(ウィジェット)ですか?ウィジェットが沢山はいってますが(ウィジェットしかないってないですが)、どれのスタイルを変えたいか具体的に書いていただけますか。
-
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 列にされている指定は、間違いなく変更が必要です。
プロフィール画像のアニメーションが良いですね!
-
おさるさんゲスト
かうたっく様 Akira様 ご返信ありがとうございます。
Akira様 ご丁寧にコードまで教えて頂き誠にありがとうございました。
コードをそのまま、張り付けさせていただいたところ、うまくふわっとが作動しませんでした。
多分色々CSSを書いているのが原因だと思いますので、もう少し自分で勉強致します。
本当にお教えいただきありがとうございました。 -
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 秒をかけてホバーアニメーションを表現する)を変更することで、ふわっと感を調整できます。たぶん、ホバーアニメーションの速さをおっしゃっていると思うのですが、違ったらごめんなさい。
-
-
投稿者投稿