Estoy realizando un pequeño Overlay cuando el cursor se posicione en la imagen.
HTML:
<div class="item-content GraphicDesign all">
<div id="icono">
<img src="" alt="">
</div>
<img src="imgport/Alaz.png" alt="">
</div>
La clase principal item-content
tiene una función en JQuery que lo que hace es obtener todas las url de las imágenes de las etiquetas img de mí HTML, cuando le des clic a la imagen, esta se abrirá en otro div donde aparece pequeña pero luego al pasar el cursor esta hace un efecto zoom con animation (es como una galería de imágenes).
Ahora estoy intentando colocar una especie de Overlay para que cuando se pase el ratón haga como cubierta en la imagen (estoy hablando antes de que el usuario le de clic a la imagen y se aparezca el otro div con la función JQuery).
Este código CSS es el del Overlay
#icono {
position: absolute;
height: 71%;
width: 92%;
z-index: 1
}
#icono::before {
content: '';
position: relative;
width: 100%;
height: 100%;
margin: 0 2px;
z-index: -1;
background: linear-gradient(rgba(48, 92, 176, 0.46) , rgba(87, 172, 161, 0.62));
margin-top: 5px;
display: inline-block;
top: 0;
right: 0;
transition: transform 0.5s;
transform: scale(0);
}
#icono:hover:before {
transition: transform 0.5s;
transform: scale(1);
transform-origin: top;
}
Con este código hace el efecto de Overlay pero el problema es que la imagen que esta cubierta por el overlay no se le puede hacer click, y por lo tanto no puedo hacerle click a la imagen y acceder al otro div donde se muestra la imagen diminuta.
Mi pregunta es: ¿Como puedo hacer para que el Overlay no afecte a la imagen? O sea que el efecto del Hover se aplique pero que me deje darle clic a la imagen para así ver la otra vista (cuando la imagen aparezca diminuta y se le haga zoom) que es donde tengo la función JQuery.
¿Alguna idea para esto?
Edit: Estas son las imágenes, a cada imagen se le puede hacer click
Cuando le doy click se accede a otro div, donde esta esa imagen.
Acá se puede apreciar el hover cuando sé esta empezando a expandir, lo de abajo es una etiqueta que la img, cada imagen tiene un etiqueta que lo identifica
Todo lo azul es el hover que se expande.
Función JQuery:
$(function()
{
const overlay = document.getElementById('overlay');
document.querySelectorAll('.grid .item-content img')
.forEach((element) =>
{
const url = element.getAttribute('src');
element.addEventListener('click', () =>
{
overlay.classList.add('active');
const url2 = document.querySelector('#overlay img')
.src = url;
});
});
}
Nota: overlay.classList.add('active'); me ejecuta un flexbox para posicionar la imagen y lo del contenido en la variable url2, me permite invocar un el otro div (osea la otra vista)
Nota: El overlay es el entorno Zoom, donde ejecuta la función Jquery con la imagen, específicamente el atributo img SRC vacío me permite hacer referencia a las url de la imágenes
<section class="overlay" id="overlay">
<div class="img-content">
<button id="cerrar"><i class="far fa-times-circle"></i></button>
<img src="" alt=""> <!-- llamado de imagen -->
</div>