before,afterを使ってhoverで画像を表示する方法

今回はタイトルの通りbefore,afterを使ってhoverで画像を表示する方法をご紹介します。
まずはデモから。

See the Pen
Untitled
by sayuri (@giraffeweb)
on CodePen.0

HTMLは以下になります。
中身は好きに変更してください。

<section id="indexConts">
        <div class="flex fw">
            <!-- 1つめのブロック -->
            <div id="facilityConts" class="contsList">
                <a class="flex fw" href="">
                    <div class="contsBox">
                        <h2 class="en">Contents01</h2>
                        <h3>コンテンツ01</h3>
                        <button type="button"></button>
                        <div class="contsInner">
                            <p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
                        </div>
                        <div class="viewBtn white">
                            <span class="flex" href="">
                                <span class="btnLabel">もっと見る</span>
                                <span class="btnArrow flex"></span>
                                <svg class="btnLine"><rect rx="30"></rect></svg>
                        </span></div>
                    </div>
                </a>
            </div>
            <!-- 1つめのブロック -->
            <!-- 2つめのブロック -->            
            <div id="companyConts" class="contsList">
                <a class="flex fw" href="">
                    <div class="contsBox">
                        <h2 class="en">Contents02</h2>
                        <h3>コンテンツ02</h3>
                        <button type="button"></button>
                        <div class="contsInner">
                            <p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
                        </div>
                        <div class="viewBtn white">
                            <span class="flex" href="">
                                <span class="btnLabel">もっと見る</span>
                                <span class="btnArrow flex"></span>
                                <svg class="btnLine"><rect rx="30"></rect></svg>
                        </span></div>
                    </div>
                </a>
            </div>
            <!-- 2つめのブロック -->
            <!-- 3つめのブロック -->
            <div id="recruitConts" class="contsList">
                <a class="flex fw" href="">
                    <div class="contsBox">
                        <h2 class="en">Contents03</h2>
                        <h3>コンテンツ03</h3>
                        <button type="button"></button>
                        <div class="contsInner">
                            <p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
                        </div>
                        <div class="viewBtn white">
                            <span class="flex" href="">
                                <span class="btnLabel">もっと見る</span>
                                <span class="btnArrow flex"></span>
                                <svg class="btnLine"><rect rx="30"></rect></svg>
                        </span></div>
                    </div>
                </a>
            </div>
            <!-- 3つめのブロック -->
        </div>
    </section>

全体のCSSはこんな感じ。

#indexConts {
    width: 100%;
    overflow: hidden;
    position: relative;
    &:before,&:after {
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        background-color: #fff;
        z-index: 50;
    }
    &:before {
        right: calc(100% / 3);
    }
    &:after {
        left: calc(100% / 3);
    }
    > .flex {
        .contsList {
            width:  calc(100% / 3);
           position: relative;
            a {
                width: 100%;
                height: 700px;
                padding: 0;
                align-content: flex-start;
                color: #fff;
                &:before {
                    content: "";
                    width: calc(100% * 3);
                    height: 100%;
                    position: absolute;
                    top: 0;
                    display: block;
                    transition: opacity 0.6s ease;
                    opacity: 0;
                    z-index: 10;
                }
                &:after {
                    content: "";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: block;
                    transition: opacity 0.6s ease;
                }
                .contsBox {
                    width: 75%;
                    height: 100%;
                    margin: auto;
                    padding-top: 240px;
                    position: relative;
                    z-index: 50;
                    transition: padding 0.4s 0.2s ease;
                    h2 {
                        font-weight: 500;
                        font-size: 1.6em;
                    }
                    h3 {
                        margin: 10px 0 0 0;
                    }
                    button {
                        display: none;
                    }
                    .contsInner {
                        p {
                            margin-top: 22px;
                            opacity: 0;
                            transition: opacity 0.4s ease;
                            color: #fff;
                            line-height: 2;
                        }
                        .viewBtn {
                            position: absolute;
                            left: 0;
                            bottom: 115px;
                        }
                    }
                }
                &:hover {
                    opacity: 1;
                    .contsBox {
                        padding-top:110px;
                        transition: padding 0.4s ease;
                        .contsInner {
                            p {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
            &#facilityConts {
                a {
                    &:after {
                        background: url("https://drive.google.com/uc?export=view&id=12WO27-jT3LBrN6BUdBkOSPSE7ADHWtdY") no-repeat center / cover; //hover前の画像
                    }
                    &:hover {
                        &:before {
                            left: 0;
                            opacity: 1;
                            background: url("https://drive.google.com/uc?export=view&id=1Cw7Lxgs31iaLxz-ZlWhXrRflcJyJgVd5") no-repeat center / cover; //hover後の画像
                        }
                    }
                }
            }
            &#companyConts {
                a {
                    &:after {
                        background: url("https://drive.google.com/uc?export=view&id=1ImRYVUYObHxikG3H5SKkM9zle-D6w2Ld") no-repeat center / cover; //hover前の画像
                    }
                    &:hover {
                        &:before {
                            left: -100%;
                            opacity: 1;
                            background: url("https://drive.google.com/uc?export=view&id=1XrPeXeataofZ7H8Ng64lFV2KiyQKMXPY") no-repeat center / cover; //hover後の画像
                        }
                    }
                }
            }
            &#recruitConts {
                a {
                    &:after {
                        background: url("https://drive.google.com/uc?export=view&id=1oYkfEppUYTQFXxrZH7YaPQqopUD-0Rq2") no-repeat center / cover; //hover前の画像
                    }
                    &:hover {
                        &:before {
                            left: -200%;
                            opacity: 1;
                            background: url("https://drive.google.com/uc?export=view&id=1wYikuHOe0_clfea5ZiCqhD_Xp58e9-z0") no-repeat center / cover; //hover後の画像
                        }
                    }
                }
            }
        }
    }
}