Forked from Captain Anonymous's Pen uDFLf.
A Pen by Joe Crawford on CodePen.
Forked from Captain Anonymous's Pen uDFLf.
A Pen by Joe Crawford on CodePen.
<div class="tile x1x1"> | |
<!-- | |
<div class="title"> | |
<span class="because">because you like</span> | |
<span class="thing">band name</span> | |
</div>--> | |
<h4 class="label">Name of Station Might be Kind of Long Actually Dude</h4> | |
<img src="http://www.slacker.com/~cmullins/v6/images/station3.jpg"/> | |
<div class="overlay"></div> | |
<div class="actions"> | |
<button>Play</button> | |
<button>More</button> | |
</div> | |
<span class="caption">This station contains song that's really really long and I'm hoping I can make it</span> | |
</div> |
@import "compass/css3"; | |
body { | |
font-family: sans-serif; | |
} | |
@import "compass/css3/transform"; | |
$tile_height: 300px; | |
$tile_width: 300px; | |
$actions_height: 40px; | |
$actions_top_final : ($tile_height / 2) - ($actions_height / 2); | |
.tile { | |
float: left; | |
position: relative; | |
margin: 0; | |
padding: 0; | |
background-color: orange; | |
z-index: 1; | |
transform-style: preserve-3d; | |
&:hover { | |
.actions { | |
opacity: 1; | |
top: $actions_top_final; | |
} | |
} | |
h4.label { | |
position: absolute; | |
top: 50%; | |
width: $tile_width; | |
@include translateY(-50%); | |
line-height: 1; | |
background-color: rgba(white, 0.2); | |
text-align: center; | |
z-index: 50; | |
padding: 0 10px; | |
box-sizing: border-box; | |
margin: 0; | |
} | |
img { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 25; | |
} | |
.actions { | |
position: absolute; | |
z-index: 100; | |
width: 100%; | |
text-align: center; | |
opacity: 0; | |
@include transition(opacity .3s, top .2s); | |
top: 0 - ($actions_height / 2); | |
button { | |
border: 0; | |
width: 40px; | |
height: 40px; | |
color: white; | |
background-color: rgba(red, .5); | |
} | |
} | |
} | |
.caption { | |
position: absolute; | |
background-color: rgba(white, 0.2); | |
width: 100%; | |
height: 10px; | |
min-height: 40px; | |
bottom: 0; | |
padding: 2px 10px 0px 10px; | |
box-sizing: border-box; | |
text-align: center; | |
z-index: 200; | |
} | |
.x1x1 { | |
width: $tile_width; | |
height: $tile_height; | |
overflow: hidden; | |
h4.label { | |
// ELEMENT MAY NOT HAVE A WIDTH! | |
width: $tile_height; | |
} | |
.overlay{ | |
background-color: rgba(0,0,0,.5); | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: $tile_width; | |
height: $tile_height; | |
} | |
} |