Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider...
However, I now have a new idea. My goal is to adjust the width of the first image to 530px and set the remaining images to 40px. Additionally, when a user hovers over any image other than the first one, I want the width of the first image to change to 40px while increasing the hovered image's width to 530px. How can I achieve this effect?
Below is my current code:
HTML
<div class="divSlider">
<ul>
<li id="slideImg1"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
=========
CSS
=== SET THE WIDTH OF THE IMAGES IN a
.divSlider li a{
width: 30px;
height: 500px;
text-decoration: none;
color: black;
display: block;
border: 2px solid gray;
border-radius: 5px;
}
=== Adjusting the width of image no.1
#slideImg1 a{
width: 540px;
}
=== Modifying the width on hover for all images except image no.1
.divSlider li a:hover{
width: 520px;
}
=== The challenge lies in changing the width when a user hovers over other images
#slideImg1 li a:hover{
width: 20px;
}
Any suggestions or assistance would be greatly appreciated.
Thanks in advance!