<div class="feature" style="background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/a/ausnichts/20160525/20160525125637_original.jpg?1464148610)">
<a class="feature-title" href="http://www.imuza.com">
はてなブログ
</a>
<div class="feature-description">
<p>はてなブログ テーマ制作<br>・とことこ with Menubar<br>・Simple Responsive with Menubar<br>・Mobile-First Responsive</p>
</div>
<div class="feature-overlay"></div>
</div>
.feature {
height: 200px;
width: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
position: relative;
overflow: hidden;
cursor: pointer;
z-index: 1;
.feature-title {
position: relative;
display: block;
height: 200px;
line-height: 200px;
color: #fff;
text-decoration: none;
text-shadow: 2px 2px 5px #000;
text-align: center;
z-index: 1;
-webkit-transition: line-height .3s linear;
transition: line-height .3s linear;
&::after {
content: "▼";
position: absolute;
top: 1em;
left: 0;
right: 0;
}
}
.feature-description {
position: absolute;
top: 200px;
height: 200px;
width: 100%;
background: rgba(255, 255, 255, 0.8);
color: #666;
white-space: nowrap;
text-shadow: 1px 1px 3px #ffffff;
padding: 0 5px;
font-size: 1em;
line-height: 1.5;
z-index: -1;
-webkit-transition: top .3s linear;
transition: top .3s linear;
}
.feature-overlay {
background: rgba(255,0,0,.5);
position: absolute;
top: 0;
height: 200px;
width: 100%;
z-index: 999;
-webkit-transition: height 0s .3s;
transition: height 0s .3s;
}
&:hover {
.feature-title {
line-height: 40px;
}
.feature-description {
top: 40px;
}
.feature-overlay {
height: 0;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.