悬停时显示的文字，转换完成后消失的

Question

我正在创建一个带图像的网站，在悬停图像时，文字在图像中缓慢显示

但转换完成后，文字会消失并隐藏在图片后面，如下面的代码段所示（代码段导致HTML解除）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<!--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>

＆＃13;

＆＃13;

＆＃13;

有人可以帮我这个吗？我已经坚持了很长一段时间，并用很多方式搜索了这个问题，但我找不到任何答案。而现在我担心这会是一个简单的解决方案，我看起来像个白痴

提前谢谢！

Answer 1

你需要相对定位这3个元素.keukensText, .badkamersText, .toilettenText并且它应该起作用

Answer 2

固定。您需要将Text类设置为“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>