【THE THOR】ホバー時のエントリー記事カードのアイキャッチ画像

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）ホバー時のエントリー記事カードのアイキャッチ画像
ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更
1. 変更内容
2. 変更後のホバー時のエントリー記事カードのアイキャッチ画像スタイル変更
最後に

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「ホバー時のエントリー記事カードアイキャッチ画像スタイル変更」についてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）ホバー時のエントリー記事カードのアイキャッチ画像

これまでエントリー記事カードのアイキャッチ画像については色々とカスタマイズを行ってきました。

現在のエントリー記事カードのアイキャッチ画像については、次の様なスタイルとなっています。

また、ホバー時のエントリー記事カードのアイキャッチ画像については、次の様なスタイルとなっています。

今回は、エントリー記事カードのタイトルと続きを読むボタンのホバー時のスタイルに合わせて、エントリー記事カードのアイキャッチ画像変更を行ってみたいと思います。

ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更

「ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更」を行います。

変更内容

「ホバー時のエントリー記事カードのアイキャッチ画像スタイル変更」内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回の変更内容を以前カスタマイズした部分を探し上書きします。

/************************************
** ■エントリー記事カードのアイキャッチのカスタマイズ
************************************/
.archive .archive__item .eyecatch {
	border-radius: 6px; /*角丸コーナー*/
	margin-top: 23px; /*アイキャッチ画像位置調整*/
	box-shadow: 6px 6px 3px rgba(0,0,0,0.4); /*シャドー（影）*/
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .archive__item .eyecatch:hover {
	-webkit-transform: translateY(-6px); /*浮かす*/
	-ms-transform: translateY(-6px); /*浮かす*/
	transform: translateY(-6px); /*浮かす*/
	box-shadow: 0px 0px 8px 4px rgba(254,97,154,1);
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .eyecatch__link img {
	transition-duration: 0.6s!important; /*アニメーション*/
}
.archive .eyecatch__link img:hover { /*ホバー時*/
	transition-duration: 0.6s; /*アニメーション*/
}