Custom content using data attributes
JADE
article.post(data-description='I am second title!')
h1.post-title I am Primary title
SCSS
.post {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto 0;
background-color: #f5f5f5;
text-align: center;
padding: 30px;
overflow: hidden;
&:after {
content : attr(data-description);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 30px;
text-align: left;
background-color: rgba(#000, 0.8);
z-index: 10;
color: #fff;
vertical-align: middle;
margin-top: 100px;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease;
transform: translateY(10px);
}
&:hover {
&:after {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
}
.post-title {
font-size: 20px;
line-height: 1.5em;
color: #363636;
}
1 Response