My tab image gallery project is nearly complete, but I'm facing some challenges with the styling. The default thumbnail doesn't load with maximum opacity as intended and my jQuery code seems to be interfering with the hover effect of my CSS. I did experiment with using focus/active CSS to set opacity on click instead of jQuery, but unfortunately, it didn't work.
Achieving the desired effect
Upon loading the page, image 1 should be displayed in the main frame with its thumbnail at full opacity while the rest have an opacity of 0.8. Hovering over an unselected thumbnail should change its opacity to 1. Clicking on a thumbnail should switch the main image and set the clicked thumbnail's opacity to 1 (while restoring image 1's opacity to 80%).
Ongoing issues
The 'default' thumbnail initially loads at 80% opacity instead of 1.
If I add the following lines to my jQuery code snippet below to manage opacity on click events, the hover effect stops working after a selection has been made.
jQuery(document).ready(function() {
$(".thumbnail").click(function() {
$("#mainimage").attr("src", $(this).attr("src"));
$(".thumbnail").css("opacity", "0.8");
$(this).css("opacity", "1");
});
})#thumbnails img {
display: inline-block;
width: 20%;
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
#thumbnails img:hover {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='gallery'>
<div id='panel'>
<img id='mainimage' src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' width=80% />
</div>
<div id='thumbnails'>
<center> <img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/large-breed-dogs-1581096488.jpg' class='thumbnail' style='opacity: 1;'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-puppy-lying-down-on-grass-royalty-free-image-1587052215.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gettyimages-589656325-1-1586896598.jpg' class='thumbnail'><img src='https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/chihuahua-dog-running-across-grass-royalty-free-image-1580743445.jpg' class='thumbnail'></center>
</div>
</div>Edit: By setting the default image's opacity to 1 using <... style=opacity:1;>, I managed to achieve the desired behavior on page load. I also experimented with another jQuery solution for changing opacity on hover, but this led to the unintended consequence of setting the opacity of the last hovered thumbnail to 1 rather than the last clicked one. Currently, the primary issue lies in the fact that my hover CSS isn't functioning correctly alongside the jQuery provided above.