.genre{

position: relative;
font-size: 2em;
font-family: 'KellySlab', sans-serif;
color: #009933;
text-align: center;
margin-bottom: 4%;
margin-top: 7%;
text-decoration: none;
}


  .mybox1
  {
  height:50%;
  width:20%;
  outline: 3px solid #000;
  position: absolute;
  top:60%;
  left:20%;
  z-index:2;
  }
   .mybox2
  {

  height:50%;
  width:20%;
  outline: 3px solid #000;
  position:absolute;
  top:60%;
  left:60%;
  z-index:2;
  }
    .mybox3
  {
  height:50%;
  width:20%;
  outline: 3px solid #000;
  position: absolute;
  top:130%;
  left:20%;
  z-index:2;
  }
   .mybox4
  {

  height:50%;
  width:20%;
  outline: 3px solid #000;
  position:absolute;
  top:130%;
  left:60%;
  z-index:2;
  }
    .mybox5
  {
  height:50%;
  width:20%;
  outline: 3px solid #000;
  position: absolute;
  top:200%;
  left:20%;
  z-index:2;
  }
   .mybox6
  {

  height:50%;
  width:20%;
  outline: 3px solid #000;
  position:absolute;
  top:200%;
  left:60%;
  z-index:2;
  }
    .mybox7
  {
  height:50%;
  width:20%;
  outline: 3px solid #000;
  position: absolute;
  top:270%;
  left:20%;
  z-index:2;
  }
   .mybox8
  {

  height:50%;
  width:20%;
  outline: 3px solid #000;
  position:absolute;
  top:270%;
  left:60%;
  z-index:2;
  }
      .mybox9
  {
  height:50%;
  width:20%;
  outline: 3px solid #000;
  position: absolute;
  top:340%;
  left:20%;
  z-index:2;
  }
   .mybox10
  {

  height:50%;
  width:20%;
  outline: 3px solid #000;
  position:absolute;
  top:340%;
  left:60%;
  z-index:2;
  }
  
  
  img
  {
  height:100%;
  width:100%;
  }
  .img
  {
   height:50%;
  width:20%;	
  }
 img
  { 
  opacity: 1;
  }
  img:hover{
    opacity: 0.8;
  	
	}
	
span.text-content{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: -20;
}

span.text-content:hover{
opacity: 1;
}