<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.