クラゲ社長
カードタイプの記事一覧のホバーエフェクトをおしゃれにカスタマイズしてみたよ！
Before
After①
デザインの変更点
- カードが上に浮き上がるエフェクトをオフ
- マウスオンでアイキャッチ画像が拡大
After②
デザインの変更点
- マウスオンでREAD MOREを表示（PCのみ）
注意
環境によってはデザインが崩れたりする場合があります。
カスタマイズは自己責任で行なってください。
読みたい項目へジャンプ
カスタマイズ方法
WP管理画面の「外観→テーマ編集→スタイルシート（style.css）」に下記のコードをコピペする。
どちらかのエフェクトのみを使用することも可能ですし、2つのコード合わせて使うことも可能です。
コード
/*--------------------------------------
記事カード ホバーエフェクト 画像拡大
--------------------------------------*/
.cardtype__article:hover{
transform: initial;/*浮き上がりオフ*/
}
.cardtype__img img {
transition: all 0.3s ease-in-out;
}
.cardtype .cardtype__article:hover .cardtype__img img {
transform: scale(1.1);/*画像拡大率*/
opacity: .7;/*画像透過*/
} コード
/*--------------------------------------
記事カード ホバーエフェクト READ MORE
--------------------------------------*/
@media screen and (min-width: 980px) {
.cardtype__article:hover .cardtype__link:before {
opacity: 1;
transition-delay: 0s;
height: 50px;/*背景の高さ*/
}
.cardtype__link:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
background: rgba(89, 92, 95, 0.7);/*背景色*/
width: 100%;
box-shadow: 0 -2px rgb(187, 193, 199);
height: 0;
z-index: 1;
opacity: 0;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.cardtype__article:hover .cardtype__link:after {
opacity: 1;
transform: translateX(20px);
transition-delay: 0.2s;
}
.cardtype__link:after {
content: "READ MORE";/*表示する文字*/
z-index: 1;
color: #fff;/*文字色*/
right: 40px;
bottom: 10px;
position: absolute;
font-size: 16px;/*文字サイズ*/
opacity: 0;
transition: all 0.3s ease-in-out;
transition-delay: 0s;
}
}
追加ホバーエフェクトデザイン
デザインの変更点
- マウスオンでREAD MOREを表示（PCのみ）
- READ MORE背景を全面に表示（PCのみ）
コード
/*--------------------------------------
記事カード ホバーエフェクト 追加1
--------------------------------------*/
@media screen and (min-width: 980px) {
.cardtype__article:hover .cardtype__link:before {
opacity: 1;
transition-delay: 0s;
height: 100%;
}
.cardtype__link:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
background: -moz-linear-gradient(bottom, #6a747d, transparent);
background: -webkit-linear-gradient(bottom, #6a747d, transparent);
background: linear-gradient(to top, #6a747d, transparent);
width: 100%;
height: 0;
z-index: 1;
opacity: 0;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.cardtype__article:hover .cardtype__link:after {
opacity: 1;
transform: translate(-50%,-50%);
transition-delay: 0.2s;
}
.cardtype__link:after {
position: absolute;
content: "READ MORE";
z-index: 1;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
font-size: 18px;
opacity: 0;
transition: all 0.3s ease-in-out;
transition-delay: 0s;
}
}
まとめ
カードが浮き上がるエフェクトはポップな印象だったので、シンプルでおしゃれなエフェクトにカスタマイズしてみました。
READ MOREは背景と文字のアニメーション時間に差をつけてよりおしゃれ感を演出！
クラゲ社長
記事カードにマウスオンしたときのインパクト大事！
クラゲ社長様
いつも素晴らしいカスタマイズ、大変楽しみにしております。
追加ホバーエフェクト１がクールすぎて早速取り入れました。
しかしながら、一点気になるところがあったので、コメントさせていただきました。
モバイルで見る場合、ワンクリックでページが遷移しないところが、ユーザーアビリティー上気になります。タッチしたときにREAD MOREの画面に変わるだけなので、もう一度クリックするという動作をする必要があると思わないユーザーがいるのではないかと懸念しました。
以上から、PCのみに適用できるようなコードを教えていただければ大変ありがたいです。
以上、お時間あれば、ご教授いただければ幸いです。
ushiuma様
カスタマイズを使っていただきありがとうございます。
同時に不具合のご報告ありがとうございます。
すでにコピペしてありますコードを下記のようにしていただくと、PC（画面幅980px以上）の場合にのみカスタマイズが適用されます。
@media screen and (min-width: 980px) {
ここにカスタマイズコードを貼り付け
}
原因を探り記事内のコードも修正させていただきます。
クラゲ社長様
早々のお返事ご対応ありがとうございました。
サイトのグレード感が増しました。ありがとうございました。