При наведении на элемент изменять стиль другого

Мне нужно чтобы при наведении на одну из иконок, остальные становились полу прозрачными, как можно реализовать это используя только CSS и HTML?

Прикрепляю разметку HTML:

    <div class="col-xs-12 col-md-12 col-md-offset-2">
            <p class="main2">Контактная информация</p>
    </div>
        <div class="col-xs-2 col-md-1 col-md-offset-3">
            <a href="#"><i class="fa fa-vk fa-2x" aria-hidden="true"></i></a>
        </div>
        <div class="col-xs-2 col-md-1">
            <a href="#"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
        </div>
        <div class="col-xs-2 col-md-1">
            <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>
        </div>
        <div class="col-xs-2 col-md-1">
            <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
        </div>
        <div class="col-xs-2 col-md-1">
            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
        </div>

и CSS:

.main2 {
    font-family: 'Raleway', sans-serif;
    font-size: 3.000em;
    color: #404040;
    letter-spacing: -1px;
    display: inline-block;
    position: relative;
    margin-top: 7%;
    left: 4%;
}
.fa-vk {
    display: inline-block;
    position: relative;
    color: #404040;
    transition: 0.35s;
    font-size: 2.375em;
    transition: 0.35s;
    margin-top: 40%;
    margin-left: 30%;
}
.fa-vk:hover {
    color: #249cce;
    transition: 0.35s;
    background: #fff;
}
.fa-facebook {
    display: inline-block;
    position: relative;
    color: #404040;
    font-size: 2.375em;
    transition: 0.35s;
    margin-top: 40%;
    margin-left: 30%;
}
.fa-facebook:hover {
    color: #249cce;
    transition: 0.35s;
}
.fa-twitter {
    display: inline-block;
    position: relative;
    color: #404040;
    font-size: 2.375em;
    transition: 0.35s;
    margin-top: 40%;
    margin-left: 30%;
}
.fa-twitter:hover {
  color: #249cce;
  transition: 0.35s;
}
.fa-github {
    display: inline-block;
    position: relative;
    color: #404040;
    font-size: 2.375em;
    transition: 0.35s;
    margin-top: 40%;
    margin-left: 30%;
}
.fa-github:hover {
    color: #249cce;
    transition: 0.35s;
}
.fa-envelope {
    display: inline-block;
    position: relative;
    color: #404040;
    font-size: 2.375em;
    transition: 0.35s;
    margin-top: 40%;
    margin-left: 30%;
}
.fa-envelope:hover { 
    color: #249cce;
    transition: 0.35s;
}

ЗЫ: Пытался реализовать таким способом:

<style type="text/css">
    .fa-envelope:hover .fa-github { opacity: 0; }
</style>

Ничего из этого не вышло