Вертикальный Навбар (с наведением)

Question

Мне нужна помощь в создании навигационной панели, я разработал ее в Photoshop, но я новичок в кодировании, и я изо всех сил пытаюсь получить именно то, что я хочу.

Я уже близко, но кодне так просто, как хотелось бы.

HTML:

<div id="navbar">
    <div class="line1">
        <div class="text1">Home</div>
    </div>
    <div class="line2">
        <div class="text2">Work</div>
    </div>
    <div class="line3">
        <div class="text3">About</div>
    </div>
</div>

CSS:

#navbar {
    position: absolute;
    text-align: right;
    top: 2em;
    right: 3em;
}

.line1 {
    background-color: white;
    opacity: 0.3;
    height: 3.5em;
    width: 0.2em;
    margin-bottom: 1em;
}

.text1 {
    color: white;
    font-family:'Nanum Myeongjo', serif;
    font-weight: 800;
    float: right; 
    margin-top: 1.5em;
    margin-right: 1.5em;
    visibility: visible;
}

.line1:hover > .text1 {
    visibility: visible;
}

(Я только показал CSS для 1-й вкладки навигации, но 2 и 3 одинаковы).

Это мой дизайн с Навбаром вверху справа: https://imgur.com/a/xgmuNAC

https://jsfiddle.net/s6u8gone/

Answer 1

Хотите, чтобы текст ссылки отображался только при наведении курсора?Если это так, вы были близки;но вместо использования visibility:visible; используйте opacity:1;, а затем установите для текстового класса значение opacity:0; по умолчанию.Как показано:

.text1 {
    color: white;
    font-family:'Nanum Myeongjo', serif;
    font-weight: 800;
    float: right; 
    margin-top: 1.5em;
    margin-right: 1.5em;
    opacity:0;
    transition:0.7s ease;
}

.line1:hover > .text1 {
    opacity:1;
    transition:0.7s ease;
}

Редактировать, основываясь на комментариях авторов:

.line1:hover {
  opacity:1;
}

https://jsfiddle.net/v14fq6md/