У меня есть 3 ссылки при наведении на которые, я хочу чтобы на заднем фоне появлялся определенный текст. То есть когда навожу курсор мыши на "Works" на фоне появляется "Works", когда навожу на "About" на фоне появляется "About". Не понимаю, как это сделать, если добавляю второй текст они лезут друг на друга.
Ниже прикрепляю свой код (Нужно открыть на всю страницу, чтобы увидеть результат).
Буду благодарен, если поможете.
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text{
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover{
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
<div class="info__black-hover"></div>
</ul>
</section>