probleem met z-index

Hallo,

ik krijg het niet voor elkaar met z-index. Normaal gesproken werkt het, maar in dit ontwerp op 1 of ander manier niet. Het maakt niet uit welke positions ik gebruik.
Het gaat om de div "text",bij de één blijft die er wel boven, maar bij de ander niet. Weten jullie het probleem?

CSS

html,body{
  background:#AB8550 url(http://yolo-fm.nl/klaas/images/twistvlietpark.jpg) no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family:arial;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;	
}
	
.arcadium{
background: url();
width:300px;
height:225px;
position:absolute;
top:35px;
left:;
}
.art{
background: url(http://yolo-fm.nl/klaas/images/static/Art.gif);
width:412px;
height:300px;
position:absolute;
top:35px;
left:200px;
}

.art:hover{
background: url(http://yolo-fm.nl/klaas/images/SpedUp/Art.gif);
width:361px;
height:263px;
position:absolute;
top:35px;
left:200px;
    -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
cursor:pointer;	 
}


.bakkenmetniels{
background: url(http://yolo-fm.nl/klaas/images/static/BakkenMetNiels.gif);
width:361px;
height:263px;
position:absolute;
top:230px;
left:;
}
.bakkenmetniels:hover{
background: url(http://yolo-fm.nl/klaas/images/SpedUp/BakkenMetNiels.gif);
width:361px;
height:263px;
position:absolute;
top:230px;
left:;
    -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
cursor:pointer;	 	 
}


.band{
background: url(http://yolo-fm.nl/klaas/images/static/Band.gif);
width:451px;
height:328px;
position:absolute;
top:440px;
left:800px;
}

.band:hover{
background: url(http://yolo-fm.nl/klaas/images/SpedUp/Band.gif);
width:451px;
height:328px;
position:absolute;
top:440px;
left:800px;
    -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
cursor:pointer;	 	 
}

.film:hover{
background: url(http://yolo-fm.nl/klaas/images/animated/Film.gif);
width:412px;
height:300px;
position:absolute;
top:50px;
left:600px;
    -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
cursor:pointer;	 	 
}


.bar{
background: url(http://yolo-fm.nl/klaas/images/static/Bar.gif);
width:903px;
height:657px;
position:absolute;
top:58px;
left:800px;
}
.camping{
background: url(http://yolo-fm.nl/klaas/images/static/Camping.gif);
width:903px;
height:657px;
position:absolute;
top:300px;
left:500px;
}
.film{
background: url(http://yolo-fm.nl/klaas/images/static/Film.gif);
width:412px;
height:300px;
position:absolute;
top:50px;
left:600px;
}
.hierendaar{
background: url(http://yolo-fm.nl/klaas/images/static/HierEnDaar.gif);
width:903px;
height:657px;
position:absolute;
top:300px;
left:500px;
}
.mgr{
background: url(http://yolo-fm.nl/klaas/images/static/MGR.gif);
width:611px;
height:444px;
position:absolute;
top:300px;
left:500px;
}

.taichi{
background: url(http://yolo-fm.nl/klaas/images/static/TaiChi.gif);
width:336px;
height:244px;
position:absolute;
top:300px;
left:500px;
}
.taichi .text{
	display:none;
}
.art .text{
	display:none;
}
.band .text{
	display:none;
}
.bakkenmetniels .text{
	display:none;
}
.film .text{
	display:none;
}
.taichi:hover{
background: url(http://yolo-fm.nl/klaas/images/animated/TaiChi.gif);
width:336px;
height:244px;
position:absolute;
top:300px;
left:500px;
    -webkit-transform:scale(1.10); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:scale(1.10); /* Opera */
     transform:scale(1.10);
cursor:pointer;	 	 
}

@keyframes tekstvak {
    from {opacity:0;}
    to {opacity:1;}
}
.text{
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
	 font-weight:normal;
	 font-size:10pt;
}
.taichi:hover .text{
	display:block;
	border:2px solid #AD8A74;
	background:#CFC2A7;
	border-radius:10px;
	padding:5px;
	position:relative;
	left:200px;
	width:300px;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
     transform:scale(1.00);	
    animation-name: tekstvak;
    animation-duration: 3s;	
	z-index:1000;
}

.art:hover .text{
	display:block;
	border:2px solid #AD8A74;
	background:#CFC2A7;
	border-radius:10px;
	padding:5px;
	position:relative;
	left:200px;
	width:300px;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
    animation-name: tekstvak;
    animation-duration: 3s;		
}

.band:hover .text{
	display:block;
	border:2px solid #AD8A74;
	background:#CFC2A7;
	border-radius:10px;
	padding:5px;
	position:relative;
	left:200px;
	width:300px;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
    animation-name: tekstvak;
    animation-duration: 3s;		
}


.bakkenmetniels:hover .text{
	display:block;
	border:2px solid #AD8A74;
	background:#CFC2A7;
	border-radius:10px;
	padding:5px;
	position:relative;
	left:200px;
	width:300px;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
    animation-name: tekstvak;
    animation-duration: 3s;	
}

.film:hover .text{
	display:block;
	border:2px solid #AD8A74;
	background:#CFC2A7;
	border-radius:10px;
	padding:5px;
	position:relative;
	left:200px;
	width:300px;
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
    -o-transform:none !important;
     transform:none !important;	
    animation-name: tekstvak;
    animation-duration: 3s;	
}

.text{
    -webkit-transform:none !important;
    -moz-transform:none !important;
    -ms-transform:none !important;
	-o-transform:none !important;
	transform:none !important;	
	font-weight:normal;
	font-size:10pt;
	position:relative;
	z-index:10000;
}

html

<html>
	<head>
		<title>CultuurFestival Stadshagen</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>

	</head>
	<body>
	
	<div class="arcadium"><div class="text"></div></div>	
	<div class="art"><div class="text">Klaas wil heel graag kunstenaar worden, maar zelfs na dit, zal het niks met hem worden.</div></div>	
	<div class="bakkenmetniels"><div class="text">Bak lekkere dingen met Niels, maar kijk uit, dat Klaas het niet uit je handen eet!</div></div>	
	<div class="band"><div class="text">Hier spelen achterlijke bands met achterlijk muziek. Typisch muziek voor Klaas.</div></div>	
	<div class="taichi"><div class="text">Tai Chi beoefenen met een waaier tijdens het cultuur festival Stadshagen. De sport Tai Chi komt uit China. Van oudsher is het bedoeld voor zelfverdediging, tegenwoordig beoefenen ook veel mensen de sport voor een stukje ontspanning en bewustwording (mindfulness).</div></div>	
	<div class="film"><div class="text">Hier kunt u genieten van een alledaagse film.</div></div>	
	<div class=""></div>	
	<div class=""></div>	
	<div class=""></div>	
	<div class=""></div>	

	</body>
</html>