<input type="radio" name="playwith" id="hover" checked>
<input type="radio" name="playwith" id="click">
<ul>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299886_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299887_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299888_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299889_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299890_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299891_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299892_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299893_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299894_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299895_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299896_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299897_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>

  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299898_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299899_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299900_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299901_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299902_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299903_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299904_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299905_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299906_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299907_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299908_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299909_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>

  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299910_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299911_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299912_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299913_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299914_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299915_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299916_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299917_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299918_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299919_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299920_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
  <li><embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/299921_modularsamples_moog-minitaur-simple-short-s.mp3" type="audio/mpeg"></li>
</ul>
<p>How would you like the play?</p>
<label for="hover">Hover</label>
<label for="click">Click</label>
body{
  font-size:1vw;
}
ul,li{
  margin:0;
  list-style:none;
}
ul{
  border-top:5em solid #111;
  display:flex;
  background:#222;
  padding:0 2em 2em;
  overflow:hidden;
  perspective: 1000em;
}

li{
  display:block;
  height:30em;
  width:5em;
  box-shadow:inset .25em -.25em 1em rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,0.2);
  border-radius:0 0 .5em .5em;
  vertical-align:top;
  background:white;
  position:relative;
  transition:transform .1s;
  transform-style: preserve-3d;
}

li:hover{
  transform: rotateX(-10deg);
  transform-origin: top center;
  z-index: -1;
}

/* Style the black keys */
/* If you have a better way of writing this nth selector let me know */
li:nth-of-type(12n - 22),
li:nth-of-type(12n - 20),
li:nth-of-type(12n - 17),
li:nth-of-type(12n - 15),
li:nth-of-type(12n - 13){
  background:black;
  box-shadow:inset -.5em -.5em 1em rgba(255,255,255,0.5);
  height:20em;
  width:4em;
  margin:0 -2em;
  z-index:2;
}

/* Hide the embed element */
embed{
  max-height:0;
  max-width:0;
  overflow:hidden;
  display:none;
}
/* Display/play the embed element on hvoer */
#hover:checked ~ ul li:hover embed{
  display:block;
}
#click:checked ~ ul li:active embed{
  display:block;
}

@media screen and (max-width:600px){
  li:nth-child(n+25){
    display:none;
  }
  li{
    font-size:140%;
  }
}


p{
  font-size:20px;
}
input[type="radio"]{
  display:none;
}
label{
  font-size:20px;
  display:block;
  width:70px;
  float:left;
  padding:.25em 1em;
  border:2px solid #111;
  border-radius:10px 0 0 10px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5)
}
label:first-of-type{
  border-right:none;
}
label:last-of-type{
  border-radius:0 10px 10px 0;
  border-left:none;
  text-align:right;
}
#hover:checked ~ label[for="hover"],
#click:checked ~ label[for="click"]{
  background:#222;
  color:#fff;
  box-shadow: inset 0 -2px 5px rgba(255,255,255,0.5);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.