--------------------------------------------------------------------
Paste this CSS code to either customize or where your theme allows;
you might need to adjust CSS as per your theme
--------------------------------------------------------------------

.image-popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999 !important;
	background-color:rgba(0,0,0,0.6);
	visibility: hidden;
	opacity: 0;
	transition: all 1s ease;
}


.image-popup .image-box {
    position: absolute;
    left: 30%;
    top: 30%;
    transspace: translate(-50%,-50%);
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transition: all 1s ease;
    height: 100%;
    background-repeat: no-repeat;
}


.image-popup .image-box .space .close-button {
    position: absolute;
    right: -20px;
    top: -25px;
    font-size: 25px;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    color: white;
    border-radius: 30px;
    padding: 4px 5px 0px 6px;
}


.image-popup.visible .image-box {
    opacity: 1;
    margin-left: 0;
}

.image-popup.visible{
	visibility:visible;
	opacity: 1;
}