I am creating an image thumbnail gallery where each thumbnail will be a link to a full size image on another page. So far when a user hovers over an image a red box covers the image using a CSS ::before pseudo class.
.overlay {
position: relative;
display: inline-block;
}
.overlay>img {
vertical-align: middle;
}
.overlay::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: red;
transition: 0.2s ease;
opacity: 0;
}
.overlay:hover::before {
opacity: 1;
}<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>I would like to change the interaction so that when a user hovers on an image, every other image in the gallery (with an 'overlay' class) will be covered by the red box, except for the image being hovered over. This would create a focus on the image being hovered over by covering the other images with red.
It seems Javascript would be the best way to make this work, how can I implement js with what I've already written?
I was also trying out CSS :not pseudo but having trouble making it work.
$('.overlay').hover(fnOver, fnOut)
function fnOver() {
$('.overlay').not(this).addClass('active')
}
function fnOut() {
$('.overlay').not(this).removeClass('active')
} .overlay {
position: relative;
display: inline-block;
}
.overlay>img {
vertical-align: middle;
}
.overlay::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: red;
transition: 0.5s ease;
opacity: 0;
}
.active::before {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>