How to transition two classes simultaneously using CSS - html

Question

I am having trouble transitioning fade in simultaneously on two classes when I hover over either one of them.
.sv-logo {
opacity: 0.5;
transition: all .3s;
}
.nav{
opacity: 0.5;
transition: all .3s
}
.sv-logo:hover, .sv-logo:hover + .nav{
opacity: 1;
transition: all .3s;
}
.nav:hover, .nav:hover + .sv-logo{
opacity: 1;
transition: all .3s;
}
<div class="grid">
<div class="sv-logo">
<img id="logo1" src="images/logo.png" alt="logo">
</div>
<div class="nav">
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
The above CSS works when I hover on top of .sv-logo, both classes fade in. However, when I hover over .nav, only .nav fades in.

Answer 1

Your problem lies in the fact that the adjacent sibling selector only selects the following element. It can't select the previous element.
Consider encapsulating in another container, maybe header
header {
opacity: 0.5;
transition: all .3s;
}
header:hover{
opacity: 1;
transition: all .3s;
}
<div class="grid">
<header>
<div class="sv-logo">
<img id="logo1" src="images/logo.png" alt="logo">
</div>
<div class="nav">
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
You could also use javascript which can traverse the DOM better.