const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
background: rgba(0, 0, 0, 0.75);
align-items: center;
justify-content: center;
position: fixed;
pointer-events: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100vw;
opacity: 0;
z-index: 2;
vertical-align: middle;
}
.show {
pointer-events: auto;
opacity: 1;
z-index: 2;
}
.centrate {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
<li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
<a href="#" id="open">
<div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."
/></div>
</a>
<span class="portfolio-item-title">Lorem ipsum.</span>
</li>
<div class="modal-container" id="modal_container">
<div class="centrate">
<img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
<p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
<button id="close" href="#">Cerrar</button>
</div>
</div>
Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.