7.1 Gallery Image: overlay and caption on hover in Customize with code Posted July 19, 2022 Hello @tuanphan, I would like to use On 8/17/2020 at 10:21 AM, tuanphan said: Add to Page Settings > Advanced > Header <style> figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #f4f6ea; /* Overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } </style> Hello @tuanphan, I would like to use this code but on the "slideshow: reel" gallery type instead. Would you happen to be able to provide a version of the code that would work for this? :)
7.1 Gallery Image: overlay and caption on hover
in Customize with code
Posted
Hello @tuanphan, I would like to use
Hello @tuanphan, I would like to use this code but on the "slideshow: reel" gallery type instead. Would you happen to be able to provide a version of the code that would work for this? :)