Skip to content

Instantly share code, notes, and snippets.

@CarterTsai

CarterTsai/index.html

Created December 2, 2013 16:27
Show Gist options
  • Save CarterTsai/7752142 to your computer and use it in GitHub Desktop.
Save CarterTsai/7752142 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by CarterTsai.
Raw
index.html
<div class="box">
<div class="fixed w15em">
<h3> Do </h3>
</div>
<div class="fixed w20em">
<h3> Re </h3>
</div>
<div class="fixed w5em">
<h3> Mi </h3>
</div>
<div class="fixed w10em">
<h3> Fa </h3>
</div>
<div class="fixed w5em">
<h3> So </h3>
</div>
<div class="fixed w10em">
<h3> La </h3>
</div>
<div class="fixed w20em">
<h3> Si </h3>
</div>
<div class="fixed w15em">
<h3> Do </h3>
</div>
</div>
Raw
style.css
.box {
height: auto ;
width: 30em;
background: #abb9e6;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
}
h3 {
transition: 1.5s;
height: 4em;
position:relative;
left: 5px;
}
.fixed {
height: 4em;
width: 10em;
transition: 1s;
background: #d28cc0;
color: white;
overflow: hidden;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
}
.fixed:hover{
height: 25em;
width: 29.4em;
font-family: 'Open Sans', sans-serif;
background: white;
}
.fixed > h3:hover {
left:50px;
top: -15px;
color: #d28cc0;
height: 25em;
}
/* Font Size */
.w15em {
width: 15em;
}
.w5em {
width: 5em;
}
.w10em {
width: 10em;
}
.w20em {
width: 20em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment