<header>
        <h1>sliding info cards</h1>
    </header>
    <article>
        <section>
            <img class="project" src="https://c.s-microsoft.com/fr-fr/CMSImages/Image_ProjectIgnite_509x190.jpg?version=5ee5f592-37f8-4790-133e-3cb200f6d2c3" alt="project">
            <div class="scroll">
                <h1>project</h1>
                <p>in this place you can say anything what youwant?</p>
            </div>
        </section>
        <section>
            <img class="project" src="https://c.s-microsoft.com/fr-fr/CMSImages/Image_ProjectIgnite_509x190.jpg?version=5ee5f592-37f8-4790-133e-3cb200f6d2c3" alt="project">
            <div class="scroll">
                <h1>project</h1>
                <p>in this place you can say anything what youwant?</p>
            </div>
        </section>
        <section>
            <img class="project" src="https://c.s-microsoft.com/fr-fr/CMSImages/Image_ProjectIgnite_509x190.jpg?version=5ee5f592-37f8-4790-133e-3cb200f6d2c3" alt="project">
            <div class="scroll">
                <h1>project</h1>
                <p>in this place you can say anything what youwant?</p>
            </div>
        </section>
    </article>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    min-width: 320px;
}
header{
    text-align: center;
    padding-top: 20px;
}

section{
    width: 23%;
    margin: 20px auto;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    float: left;
}
@media only screen and(min-width:1024px){
    article{
        display: flex;
    }
    selection{
    width: 30%;
    }
}
section:hover .scroll{
    top: 0;
}
.project{
    width: 100%;
    display: block;
    border-radius: 5px;
}
.scroll{
    position: absolute;
    top: 100%;
    height: 100%;
    background: rgba(256, 256, 256, 0.8);
    color: #333;
    transition: top 0.6s;
}
.scroll h1{
    padding: 10px;
    font-size: 20px;
    letter-spacing: 0.2em;
    text-align: center;
}
.scroll p{
    padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.