CSS Pointer for "Close"

Author: ASchmidt1Created Oct 28, 2024Updated Oct 28, 2024

Hi,

currently the lightbox will show the "Zoom Out" pointer, while hovering over the "Close" button, or outside the image. Users have been confused by that, as the true result of clicking is not zooming, but rather to close the lightbox.

I'm suggesting to replace the current CSS declaration of:

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: zoom-out;
}

with a custom pointer that uses the contextually correct, standard "close box" icon:

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: url( Pointer-CloseBox.svg ),
		url( Pointer-CloseBox.png ),
		pointer;
}

Thank you! Andy

http://www.anamera.dev/wp-content/plugins/Anamera/public/images/Pointer-CloseBox.svg http://www.anamera.dev/wp-content/plugins/Anamera/public/images/Pointer-CloseBox.png

Pointer-CloseBox Pointer-CloseBox

Source: dimsemenov/Magnific-Popup