How to make text hover over images the way portfolios do?

Site URL: https://armadillo-apple-za9h.squarespace.com/

Hi, 

I was using a Portfolio as the menu options for a home page for a client — however, we can't change the URL slugs on them and it is super frustrating. So I thought I'd just create a new menu, the normal way, but I'd still like to add the hover text if possible. Is this something that can be relatively easily achieved? 

Here is the portfolio homepage — https://armadillo-apple-za9h.squarespace.com/ — password odc2021

Here is my tester homepage that I'd like to add the hover — https://armadillo-apple-za9h.squarespace.com/home-test 

(Yes, the menu options are in a different order, just threw them on there to play with) 

Thanks in advance! 

Anyone??

@tuanphan You are, as always, my hero.

@tuanphan One more question!  Where in the CSS can I specify that I want it to be one of my installed fonts? H1 or H2, or any specific font actually? Thank you! 

On 8/23/2021 at 11:49 PM, innoventure said:

@tuanphan One more question!  Where in the CSS can I specify that I want it to be one of my installed fonts? H1 or H2, or any specific font actually? Thank you! 

use this CSS

.gallery-caption * {
	font-family: enter-custom-font-name !important;
}

20 hours ago, SeeEnEh said:

This is a life saver! Been searching for this for a while! I had one issue I'm sure I didn't do something right but for me the overlay text doesn't disappear when the mouse pointer is off of the picture. Any way to get some help one it? Many Thanks in advance! 

What is page url? We can check your case easier

Is this still the way to go about this? I'm trying this but it doesn't seem to take effect. 

Test site at https://fife-mushroom-gzzn.squarespace.com password: art

Thanks!

On 5/16/2024 at 7:16 AM, bbobby said:

Is this still the way to go about this? I'm trying this but it doesn't seem to take effect. 

Test site at https://fife-mushroom-gzzn.squarespace.com password: art

Thanks!

Use this CSS code

/* 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 @tuanphan! This worked as far as darkening the image when it's hovered over, but no words appear. How can I make that happen? 

On 5/23/2024 at 3:53 AM, bbobby said:

Thank you @tuanphan! This worked as far as darkening the image when it's hovered over, but no words appear. How can I make that happen? 

Use this under

figcaption.gallery-caption.gallery-caption-grid-masonry, figcaption.gallery-caption.gallery-caption-grid-masonry p.gallery-caption-content {
    display: block !important;
}
figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all 0.2s !important;
}
figure.gallery-masonry-item {
    position: relative;
}
figure.gallery-masonry-item:hover figcaption {
    opacity: 1 !important;
    transition: all 0.2s !important;
}

thank you so much @tuanphan!

Hello,

something similar needed here.

page:https://leopard-ferret-97dt.squarespace.com

password: prova_24

I started my homepage using a portfolio (https://leopard-ferret-97dt.squarespace.com/config/pages/66b0bc633e4d0a2f72db744c)

but I was not able to change the URL so made a new page from scratch (https://leopard-ferret-97dt.squarespace.com) and I would like to have the same effect of the other (hover over text and changing background image) + adding a link to another page, which was not possible in the portfolio.

Hope I was clear 😉

On 8/7/2024 at 4:09 AM, JulesBonnot7 said:

Hello,

something similar needed here.

page:https://leopard-ferret-97dt.squarespace.com

password: prova_24

I started my homepage using a portfolio (https://leopard-ferret-97dt.squarespace.com/config/pages/66b0bc633e4d0a2f72db744c)

but I was not able to change the URL so made a new page from scratch (https://leopard-ferret-97dt.squarespace.com) and I would like to have the same effect of the other (hover over text and changing background image) + adding a link to another page, which was not possible in the portfolio.

Hope I was clear 😉

Site is private, you can check again