【WordPress】エントリーカードのCSSアニメーション3選

こんな疑問を解決していきます。

本記事の内容

ブログのトップページに移動したときにまず目に入ってくる記事一覧。

その各記事のエントリーカードにマウスカーソルを合わせた(ホバーした)ときにちょっとしたアニメーションが入ると、選択したことが分かりやすくなるし見栄えも良くなって一石二鳥ですよね。

今回はCSSのみでできるエントリーカードアニメーションの実装方法をご紹介していきます。

CSSでできる3つのアニメーションの実装方法

今回ご紹介するエントリーカードのCSSアニメーションは、有名なWordPressテーマの「JIN」「SANGO」「SWALLOW」を参考に作成しました。

• ふわっとエントリーカード(JIN/SANGO風)
• 文字のフェードイン付きエントリーカード(SWALLOW風)
• 拡大&半透明になるエントリーカード(JINのブログカード風)

また、今回は私が現在使用しているテーマの「Cocoon」だけではなく、幅広いテーマに汎用的に使えるCSSコードを紹介したかったため、疑似的に以下の要素をHTMLとCSSでコーディングして説明していきます(クオリティの低さに関してはご容赦ください笑)

エントリーカードイメージ

ソースコード

.entry-card {
    display: flex;
    background: #e0efff;
    width: 700px;
    height: 210px;
    padding: 10px;
}

.eye-catch {
    width: 180px;
    height: 180px;
}

.eye-catch img {
    width: 100%;
    height: 100%;
}

.title {
    padding-left: 10px;
}

<div class="entry-card-0">
    <div class="eye-catch-0">
        <img src="...../seal.jpg" alt="">
    </div>
    <div class="title-0">タイトルタイトルタイトルタイトルタイトルタイトルタイトル</div>
</div>

ふわっとエントリーカード(JIN/SANGO風)

ホバーするとふわっと持ち上がるエントリーカードです。

.entry-card {
    transition: .3s;
}

.entry-card:hover {
    cursor: pointer;
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

:hover疑似クラスを付けたエントリーカード上にホバーしたとき、transformプロパティでエントリーカードを持ち上げ、box-shadowプロパティで薄い影を付けています。

また、transitionプロパティに.3s(0.3秒)を指定することによって、ふわっと持ち上がるようなアニメーションを実現しています。

文字のフェードイン付きエントリーカード(SWALLOW風)

ホバーするとアイキャッチ画像に「READ MORE」という文字が浮かび上がるエントリーカードです。

.eye-catch {
    overflow: hidden;
    position: relative;
  }

.eye-catch::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "READ MORE";
    font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: .3s;
}

.entry-card:hover {
    cursor: pointer;
}

.entry-card:hover .eye-catch::after{
    opacity: 1;
    font-size: 130%;
}

.entry-card-2 img {
    transition: .3s;
}

.entry-card:hover .eye-catch img {
    filter: blur(3px) brightness(60%);
    transform: scale(1.1);
}

やや複雑ですが、重要な個所をピックアップして解説します。

以下の記事を参考に作成したので、詳細についてはこちらをご覧ください。

拡大&半透明になるエントリーカード(JINのブログカード風)

ホバーするとアイキャッチが少し拡大し、全体が半透明になるエントリーカードです。

こちらはエントリーカードではなく、JINのブログカードを参考にして作成しました。

.entry-card,
.eye-catch img {
    transition: .3s;
}

.entry-card:hover {
    cursor: pointer;
    opacity: 0.7;
}

.entry-card:hover .eye-catch img {
    transform: scale(1.1);
}

こちらも考え方は上2つと似たようなものです。

ホバー時にtransformプロパティでアイキャッチ画像を拡大し、opacityプロパティでエントリーカード全体に若干の透明感を与えて選択されていることが分かりやすいアニメーションになっています。

今回はCSSのみでできるエントリーカードアニメーションの実装方法をご紹介しました。

当ブログでは、これ以外にも様々なWordPressのカスタマイズ記事を書いていますので、そちらもぜひ参考にしてみてください。