TheBrattleboro

Thank you Ed!

Site URL: https://www.thebrattleboro.com/ Hi there, I'm not sure exactly how to word this, but I am wondering if there's anyway to have all my pages be nested under my homepage in Google Search Results. My site is indexed, and I have a site map uploaded, but I want my results to show up neatly organized like the screengrab (Example.png). My site is only showing 1/2 nested pages depending on the search terms. Can anyone advise? Thank you!

I injected the following code, but the font / type is not changing. https://www.thebrattleboro.com/home-1 /* Images overlay */ div#page-section-628fca388c857c062397772f figure a:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; z-index: 900; top: 0; left: 0; width: 100%; height: 100%; } //* Masonry hover */ [data-section-id="627ecc448851d864ffb7543e"] { figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { font-family: orpheus-pro; font-size: 3em; color: #F9F8ED; 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: rgba(0,0,0,0.5); /* 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; }}

Thank you! It's working well, but I wanted to change the font so I injected the following bolded part. Now when I hover, I see the large caption, but as I pull my mouse away, I still see the small caption in the back. How can I adjust this? /* Masonry hover buttons */ [data-section-id="627ecc448851d864ffb7543e"] { 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; font-family: orpheus-pro; font-size: 3em; color: #F9F8ED; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.5); /* 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; }}

That is correct! Image with dark overlay and text overlay.

Thanks @tuanphan I think I may have asked in a confusing way. Can I try again? Is there a way to get these captions to hover OVER the photo while controlling the font styles? It would be even better if they appear on hover. Thank you again!

Site URL: https://www.thebrattleboro.com/home-1 Hi there, I'm looking to use photos as buttons and I would love to have labels overlaying each one. I started with a packed gallery, but I am not sure what CSS I should add to have the captions overlay the images. I want it to look like the screengrab attached. Thanks in advance for your help! thebrattleboro.com/home-1