html - cssを使用してhtml要素が他の要素に影響を与えるようにする方法

Question

相互依存 (相互にバインド) したい要素のコレクションが 2 つあります。一方には、ナビゲーション バーにいくつかのテキスト リンクがあり、他方には、同じリンクへの参照を含むいくつかの要素があります。以下に説明するように、これらの画像にはアニメーション効果があります (画像をホバーするとアニメーションが発生します)。

次の動作を実現したい: ナビゲーションのリンクにカーソルを合わせたとき。バー、画像のホバリング効果を有効にしたいと思います。¿それはjQueryなしで可能ですか?

これはアニメーション要素のスタイルです

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color:rgba(116,89,47,0.8);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

これはナビゲーション要素のマークアップです

<nav><ul>
    <li><a href="http://users.dsic.upv.es/~margomez/">DSIC</a></li>
    <li><a href="rna/tutorial/RNA_marcos.html">RNA</a></li>
    <li><a href="ares/index.php">De Ludo Bellico</a></li>
</ul></nav>

これは、アニメーション効果のある画像の 1 つのマークアップです

<div class="view view-first">  
    <img src="images/animage.png" />  
    <div class="mask"/>  
    <div class="content"> 
        <h2>Name</h2>  
        <p>Description</p>  
        <a href="ares/index.php" class="info">Take me there!</a>  
    </div>
</div>

そのため、ナビゲーション バーの要素にカーソルを合わせると、関連する「ビュー」要素でアニメーションを起動したいと思います

私が読んだことについては、jQuery（またはjs）を使用して動作を実現できるようです。しかし、純粋な html と css を使用して同じ効果を達成することは可能ですか? どうやって？

次の図は、私のページのレイアウトを示しています。青色のナビゲーション バーの要素にカーソルを合わせると、下の写真でアニメーションを起動したいと思います。