Lipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat esse vel autem, id nobis aliquid, quo voluptatibus sed molestiae aspernatur dignissimos quos atque fuga quas ex deleniti error, at consectetur.
<div class="article">
<div class="article-background" style="background-image: url(http://vizua.net/dummy.jpg);"></div>
<div class="article-content">
<h2>Lipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat esse vel autem, id nobis aliquid, quo voluptatibus sed molestiae aspernatur dignissimos quos atque fuga quas ex deleniti error, at consectetur.</p>
</div>
</div>
.article {
position: relative;
height: 300px;
overflow: hidden;
width: 300px;
}
.article-background {
position: absolute;
top: -33%;
right: 0;
bottom: 33%;
left: 0;
background-size: cover;
z-index: 100;
}
.article-content {
position: absolute;
top: 67%;
right: 0;
bottom: 0;
left: 0;
padding: 15px;
background: rgba(0,0,0, .6);
color: #fff;
z-index: 200;
}
.article-background, .article-content {
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.article:hover .article-background {
top: 0;
bottom: 0;
}
.article:hover .article-content {
top: 100%;
}
.article:hover .article-content:hover {
top: 0;
}
/* default .article : end */
/* checkzone .article */
.article-content-checkzone {
position: absolute;
top: 80%; right: 0; bottom: 0; left: 0;
background: #888; /* remove it for use */
z-index: 400;
}
.article:hover .article-content-checkzone:hover + .article-content {
top: 0;
}
