text that appears while hovering, dissapears after transition is complete - html

Question

I am making a website with images, while hovering the image, text appears slowly in the image
but after the transition is complete, the text disappears and hides behind the image like in the snippet below (snippet caused HTML to derp):
.keukens, .badkamers, .toiletten{
position:relative;
overflow:hidden;
height:300px;
padding:0;
}
.keukens:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.badkamers:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toiletten:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.container > .links > .keukens:hover .keukensText{
opacity:1;
}
.container > .links > .badkamers:hover .badkamersText{
opacity:1;
}
.container > .links > .toiletten:hover .toilettenText{
opacity:1;
}
.keukensText, .badkamersText, .toilettenText{
opacity:0;
transition: all 0.5s;
}
.keukensText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.badkamersText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.toilettenText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
<!--container-->
<div id="container" class="container">
<div class="links">
<div class="col-sm-4 keukens">
<div class="keukensText">
<a href="keukens.html">
<h2>
<span>Keukens</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 badkamers">
<div class="badkamersText">
<a href="badkamers.html">
<h2>
<span>Badkamers</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 toiletten">
<div class="toilettenText">
<a href="toiletten.html">
<h2>
<span>Toiletten</span>
</h2>
</a>
</div>
</div>
</div>
</div>
Can anybody help me with this? I've been stuck on this for quite a while and googled this question in so many ways but I couldn't find any answers. And now I am afraid it's going to be such a simple solution that I look like an idiot
Thank you in advance!

Answer 1

you need to relatively position these 3 elements .keukensText, .badkamersText, .toilettenText and it should work

Answer 2

Fixed. You needed to have the Text classes set to "position: absolute"
.keukens, .badkamers, .toiletten{
position:relative;
overflow:hidden;
height:300px;
padding:0;
}
.keukens a {
z-index: 40;
}
.keukens:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.badkamers:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toiletten:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: 0;
background-color:red;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.keukens:hover .keukensText{
opacity:1;
z-index: 4;
}
.badkamers:hover .badkamersText{
opacity:1;
}
.toiletten:hover .toilettenText{
opacity:1;
}
.keukensText, .badkamersText, .toilettenText{
opacity:0;
transition: all .5s;
position: absolute;
}
.keukensText h2 span {
color: black;
z-index: 50;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.badkamersText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
.toilettenText h2 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
}
<!--container-->
<div id="container" class="container">
<div class="links">
<div class="col-sm-4 keukens">
<div class="keukensText">
<a href="keukens.html">
<h2>
<span>Keukens</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 badkamers">
<div class="badkamersText">
<a href="badkamers.html">
<h2>
<span>Badkamers</span>
</h2>
</a>
</div>
</div>
<br>
<div class="col-sm-4 toiletten">
<div class="toilettenText">
<a href="toiletten.html">
<h2>
<span>Toiletten</span>
</h2>
</a>
</div>
</div>
</div>
</div>