Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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! 

Link to comment
  • Solution

Add to Design > Custom CSS

figure.gallery-grid-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-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-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-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
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! 

Capture.JPG

What is page url? We can check your case easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.