WordPressのアイキャッチ画像を自動でぼかしたい

Question

会員制サイトをWordPressで運営しており
ログインしないと記事を見れないようにしていますが
アイキャッチのサムネイル画像で見えてはいけない情報が見えてしまいます。

・アイキャッチは表示させたいし
・トップページは公開（完全非公開にしたくない）状態にしたいです。

そこで
WordPressにて、下記プラグインを使い、投稿の一番上の画像を自動でアイキャッチ画像にしているのですが
→　XO Featured Image Tools（投稿の画像からアイキャッチ画像を自動生成）

自動で作られるアイキャッチのサムネイル画像にぼかしをいれるにはどうしたらいいかを調べ

アイキャッチはCSSでいじれるかも、ということがわかり
.eye-catch img {
filter:

参考→　https://wp-cocoon.com/community/cocoon-theme/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%81%AE%E3%81%BC%E3%81%8B%E3%81%97%E3%82%92%E7%84%A1%E3%81%8F%E3%81%97%E3%81%9F%E3%81%84%E3%80%82/

filter: blur( );　
というのを使えば、ぼかしが可能になる。

参考→　https://rui-log.com/css-bg-blur/

２つを繋げて、WordPressテーマカスタマイザーからCSSに追加すれば、いけるかも
.eye-catch img {
filter: blur( );　
}

しかし、ダメでした。
どうすれば、WordPressのアイキャッチ画像に自動でぼかしをいれられるのでしょうか。

Answer 1

filter: blur(/* 少なくともここにpx指定が必要 */);　

【blur() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/blur()

Comments

[mmkkttkk]

.eye-catch img {
filter: blur(6px);　
}

これを貼り付けてもダメでした・・・

[kei344]

効いていない理由をデベロッパーツールで探ってください。
・ブラウザやキャッシュ系プラグインのキャッシュが残っている
・CSSがそのページで読み込まれていない
・詳細度が低く、他の指定で上書きされている
・セレクタの指定が間違っている

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

[mmkkttkk]

頂いた情報を元に
.eye-catch img {
filter: blur(1.5rem);
}

で、やってみましたがダメで、こちらの方法でコード？を全部見てみました。

→　【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

コードはこんな感じです
＝＝＝＝
.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 0;
background: #fff;
}
img:not(.size-st_header_slider), video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
box-sizing: border-box;
}
img {
border: 0;
}
*, code {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
margin: 0px;
padding: 0px;
}
img[Attributes Style] {
width: 202px;
aspect-ratio: auto 202 / 150;
height: 150px;
}
a {
color: #4682b4;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
}
body {
min-width: 320px;
word-wrap: break-word;
background-color: #fafafa;
counter-reset: stcnt;
}
:root {
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-20: #005a87;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

===

こんな感じで出てきましたので
.eye-catch img {
filter: blur(1.5rem);
}

の
.eye-catch img {

このあたりを正しく入力すればできるのかなと組み合わせ中です（うまくいきません・・・）
この辺がヒント？？？
.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {

[mmkkttkk]

.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
filter: blur(1.5rem);
}

コレでもダメでした・・・