I am looking to create a connection between two sets of elements, where one set consists of text links in a navigation bar and the other set contains images with references to the same links. These images have animation effects triggered by hovering over them.
The desired behavior is to activate the hover effects on the images when hovering over the links in the navigation bar. Is it possible to achieve this without using jQuery?
Below is the styling for the animated elements:
.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;
}
/* Hover effects */
.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;
}
This section shows the markup for the navigation elements:
<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>
Lastly, here is the markup for one of the images with animation effects:
<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>
The goal is to trigger the animation in the associated "view" element when hovering over the navigation elements. While this behavior can typically be achieved with jQuery or JavaScript, I am curious if it is possible to accomplish the same effect using only HTML and CSS. If so, how would you go about implementing this?
To provide context, the layout of my page involves activating animations in the images below when hovering over the corresponding elements in the navigation bar highlighted in blue.