Jump to content

Add a transparent text block over individual gallery images

Recommended Posts

On my main homepage, I have an image gallery showcasing all of my work. What I want to be able to do is when the mouse cursor hovers over one of the images in the gallery, I want it to darken the image and display the title of the work, similar to this website's page https://www.stevewolf.co/ . Let me know if this is possible and what code I must implement to make this happen. I attached an example image below of what an image looks like when the cursor hovers over the gallery image on the example site, I included in this chat. Thank you. 

My website domain is: https://domfishdesigns.com/

 

Screenshot 2023-08-22 at 1.03.50 PM.png

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I just figured out that it is possible to use Squarespace's "Portfolio" to do what I am trying to figure out. However, is there another way to do this, or is it just worth using the "Portfolio" page that Squarespace provides, which already has this implemented, instead of trying to do custom code?

Link to comment

There are dozens of ways to get what you want

  • Use Image Block - Inline or Poster Layout in Classic Editor + some CSS code (we can provide this)
  • Use Gallery Section - Grid then use (#1) code in below (You need to enable gallery caption, add some caption, add link to image first)
  • Use Summary Block
  • Use Section + Text Block
  • ....
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.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

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.