記事一覧カードのホバーエフェクトをおしゃれにしてみる【SANGOカスタマイズ】

記事カードのホバーエフェクト を変更

クラゲ社長

カードタイプの記事一覧のホバーエフェクトをおしゃれにカスタマイズしてみたよ!

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は背景と文字のアニメーション時間に差をつけてよりおしゃれ感を演出!

クラゲ社長

記事カードにマウスオンしたときのインパクト大事!

3 COMMENTS

ushiuma

クラゲ社長様
いつも素晴らしいカスタマイズ、大変楽しみにしております。
追加ホバーエフェクト1がクールすぎて早速取り入れました。
しかしながら、一点気になるところがあったので、コメントさせていただきました。
モバイルで見る場合、ワンクリックでページが遷移しないところが、ユーザーアビリティー上気になります。タッチしたときにREAD MOREの画面に変わるだけなので、もう一度クリックするという動作をする必要があると思わないユーザーがいるのではないかと懸念しました。
以上から、PCのみに適用できるようなコードを教えていただければ大変ありがたいです。
以上、お時間あれば、ご教授いただければ幸いです。

返信する
管理人

ushiuma様
カスタマイズを使っていただきありがとうございます。
同時に不具合のご報告ありがとうございます。
すでにコピペしてありますコードを下記のようにしていただくと、PC(画面幅980px以上)の場合にのみカスタマイズが適用されます。

@media screen and (min-width: 980px) {
ここにカスタマイズコードを貼り付け
}

原因を探り記事内のコードも修正させていただきます。

返信する
ushiuma

クラゲ社長様
早々のお返事ご対応ありがとうございました。
サイトのグレード感が増しました。ありがとうございました。

返信する

コメントを残す

メールアドレスが公開されることはありません。