Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Article Tiles

Article Tiles

Pen to display article previews, or possibly work/projects section on a portfolio site.

A Pen by Max Kurapov on CodePen.

License.

<div class="wrap">
<div class="tile">
<img src='https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=996&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="tile">
<img src='https://images.unsplash.com/photo-1458668383970-8ddd3927deed?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1004&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="tile">
<img src='https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
body
{
background-color:#eee
}
.wrap
{
margin:50px auto 0 auto;
width:100%;
display:flex;
align-items:space-around;
max-width:1200px;
}
.tile
{
width:380px;
height:380px;
margin:10px;
background-color:#99aeff;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
font-family:'Roboto';
}
.tile img
{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
transition: all 0.4s ease-out;
}
.tile .text
{
/* z-index:99; */
position:absolute;
padding:30px;
height:calc(100% - 60px);
height:calc(100% - 60px);
}
.tile h1
{
font-weight:300;
margin:0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2
{
font-weight:100;
margin:20px 0 0 0;
font-style:italic;
transform: translateX(200px);
}
.tile p
{
font-weight:300;
margin:20px 0 0 0;
line-height: 25px;
/* opacity:0; */
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text
{
opacity:0;
transition: all 0.6s ease-in-out;
}
.tile:hover
{
/* background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform:scale(1.05);
}
.tile:hover img
{
opacity: 0.2;
}
.tile:hover .animate-text
{
transform:translateX(0);
opacity:1;
}
.dots
{
position:absolute;
bottom:20px;
right:30px;
margin: 0 auto;
width:30px;
height:30px;
color:currentColor;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
}
.dots span
{
width: 5px;
height:5px;
background-color: currentColor;
border-radius: 50%;
display:block;
opacity:0;
transition: transform 0.4s ease-out, opacity 0.5s ease;
transform: translateY(30px);
}
.tile:hover span
{
opacity:1;
transform:translateY(0px);
}
.dots span:nth-child(1)
{
transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
transition-delay: 0.15s;
}
@media (max-width: 1000px) {
.wrap {
flex-direction: column;
width:400px;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,900,700,100italic,300italic,400italic,500italic,700italic,900italic,300,100'" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment