Image Hover Effect With Text Fade In CSS

Image hover effect with text fade in and fade out CSS. In CSS image hover effects, post caption is overlay and opacity none but when we hover on the thumbnail then the caption will show in a smooth motion.

HTML

<div class="middle-section">
    <div class="post-thumb">
        <img src="/images/image-one.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Lorem Ipsum is simply dummy text</p>
        </div>
    </div>

    <div class="post-thumb">
        <img src="/images/image-two.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Lorem Ipsum is simply dummy text</p>
        </div>
    </div>

    <div class="post-thumb">
        <img src="/images/image-three.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Whatever It Is - Always Awesome</p>
        </div>
    </div>

    <div class="post-thumb">
        <img src="/images/image-four.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Lorem Ipsum is simply dummy text</p>
        </div>
    </div>

    <div class="post-thumb">
        <img src="/images/image-five.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Lorem Ipsum is simply dummy text</p>
        </div>
    </div>

    <div class="post-thumb">
        <img src="/images/image-six.jpg" alt="">
        <div class="caption-text">
            <h2>Hover Effects CSS</h2>
            <p>Lorem Ipsum is simply dummy text</p>
        </div>
    </div>
</div>

CSS

.middle-section {
    max-width: 1200px;
    margin: 50px auto;
}
.post-thumb {
    float: left;
    position: relative;
    overflow: hidden;
    width: 33.333%;
    max-height: 300px;
    font-family: arial;
}
.post-thumb:hover .caption-text {
    opacity: 1;
    transform: scale(1.2);
}
.post-thumb .caption-text h2,
.post-thumb .caption-text p {
    width: 100%;
    margin: 10px 0px;
}
.post-thumb img{
    float: left;
}
.caption-text {
    position: absolute;
    opacity: 0;
    transition: all 0.45s ease-in-out;
    background-color: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    text-align: center;
    color: #ffffff;
    padding-top: 120px;
}