Estoy creando una galería de miniaturas de imágenes donde cada miniatura será un enlace a una imagen de tamaño completo en otra página. Hasta ahora, cuando un usuario se desplaza sobre una imagen, un cuadro rojo cubre la imagen usando un CSS :: antes de la pseudo clase.
.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>Me gustaría cambiar la interacción para que cuando un usuario se desplace sobre una imagen, todas las demás imágenes de la galería (con una clase de "superposición") queden cubiertas por el cuadro rojo, excepto la imagen sobre la que se desplaza el cursor. Esto crearía un foco en la imagen sobre la que se pasa el cursor cubriendo las otras imágenes con rojo.
Parece que Javascript sería la mejor manera de hacer que esto funcione, ¿cómo puedo implementar js con lo que ya he escrito?
También estaba probando CSS : no pseudo pero tenía problemas para hacerlo funcionar.
$('.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>