4

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

Img

Cuando le doy click se accede a otro div, donde esta esa imagen.

entorno de vista

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

Este es el hover completo

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>
10
  • Podrías hacer algo como esto que he encontrado en w3school, solo tendrías que cambiar el contenido del div que aparece, no se si es lo que quieres pero espero que te sirva. Commented el 19 feb. 2020 a las 21:16
  • Amigo gracias por contestar, acabo de editar mi pregunt, para que puedes ver como es la galería. Commented el 20 feb. 2020 a las 13:35
  • Igualemente es mas o menos lo que quiero hacer pero no da la talla. Commented el 20 feb. 2020 a las 13:47
  • Fijate este link, es de hover sobre imagenes en bootstrap, lo que deberias cambiar de alguno de estos hovers, seria que el tag <a> este en todo el overlay y no solo en el boton que trae, porque en definitiva si el overlay cubre la imagen, el enlace deberia estar puesto sobre el overlay. Ojala te sirva. Commented el 20 feb. 2020 a las 13:48
  • Hola buen dia, el caso es que la imagen no es un enlace <a>, por que lo estoy llamando desde la url, osea me refiero a que a la imagen en si se le hace click y no al hover, por que si le doy click al hover no me acciona lo de la imagen (claro la esta cubriendo). Commented el 20 feb. 2020 a las 14:20

1 respuesta 1

1

La solución puede ser simple si le agregas el addEventListener del click en el contenedor item-content y no en la imagen.

En tu caso tienes un elemento de clase css llamado icono el cual se superpone a la imagen cuando se hace el hover, por lo cual cuando haces el click no te deja acceder al elemento imagen que queda debajo ya que los elementos son hermanos por el cual el click no es delegado entre ellos dos.

Creo que algo como esto te puede servir. https://jsfiddle.net/chenay01/o3L8azq1/79

HTML

<!-- Galeria de imagenes -->
<section class="gallery">
  <div class="item">
    <img class="item__img" src="https://picsum.photos/id/15/150/150" />
    <div class="item__description">
      click 1
    </div>
  </div>

  <div class="item">
    <img class="item__img" src="https://picsum.photos/id/12/150/150" />
    <div class="item__description">
      click 2
    </div>
  </div>

  <div class="item">
    <img class="item__img" src="https://picsum.photos/id/17/150/150" />
    <div class="item__description">
      click 3
    </div>
  </div>

</section>

<!-- Muestra la imagen en una ventana modal -->
<section id="overlay">
  <button id="cerrar">x</button>
  <img id="imagen-overlay" src="" alt="imagen" />
</section>

JAVASCRIPT

// Variables
var items = document.querySelectorAll('.item');
var overlay = document.getElementById('overlay');
var cerrar = document.getElementById('cerrar');
var imagenOverlay = document.getElementById('imagen-overlay');

// Recorro cada item y habilito el click para mostrar la modal cuando
// se da click en alguno de los items de la galería.
items.forEach(item => item.onclick = (el) => {
  var img = el.currentTarget.childNodes[1];
  var src = img.getAttribute('src');

  overlay.classList.toggle("mostrar");
  imagenOverlay.src = src;
});

// Cierro la ventana modal cuando le doy click al botón cerrar
cerrar.onclick = () => {
  overlay.classList.toggle("mostrar");
};

CSS

body {
  display: flex;
}

.gallery {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.item {
  cursor: pointer;
  margin: 10px;
  position: relative;
  width: 150px;
}

.item .item__description {
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  font-size: 22px;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.item:hover .item__description {
  opacity: 1;
}

#overlay {
  align-items: center;
  animation: fadeIn 200ms;
  background-color: rgba(0, 0, 0, 0.83);
  display: none;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9999;
}

#overlay.mostrar {
  display: flex;
}

#cerrar {
  background-color: transparent;
  border-radius: 100%;
  border: 1px solid white;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 17px;
  margin-bottom: 8px;
  margin-left: 130px;
}

#cerrar:hover {
  border: 1px solid yellow;
  color: yellow;
}
7
  • Si es justo eso lo que quiero, pero tengo una pregunta. Como puedo hacer si en tal caso estoy haciendo la llamada de la imagen pero en otro div. En este momento acabo de colocar el html de la clase (overlay). Lo que hago es llamar a otro div sin imagene para que se pase una referencia. Commented el 21 feb. 2020 a las 1:59
  • Coloque el codigo mas abajo, gracias por contestar!. Commented el 21 feb. 2020 a las 2:08
  • Ahi quedo actualizado el código, dime si así te sirve. Saludos.
    – chenay01
    Commented el 21 feb. 2020 a las 21:03
  • Ok buenas noches, estuve probando el codigo, cuando le doy click a la imagen justo cuando el overlay (la cubierta azul en mi caso) se muestra, me sale la imagen pero rota. Commented el 21 feb. 2020 a las 22:42
  • Pero me di cuenta de algo, pasa que tu en vez de usar otro div, estas usando un hover a tu misma clase item, pero en mi caso yo tengo una clase icono que me muestra un overlay (azul) sobre mi imagen. Esto lo hago por que no puedo colocarle un fondo decorativo a la imagenes por que se sobreponen, aun colocandole posicion absolute el fondo se muestra pero detras de las imagenes Commented el 21 feb. 2020 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.