Jump to content

Help with Image showing overlay title animation upon hover

Recommended Posts

Site URL: https://www.jorigoh.com/studioportraits

Hello,

I want to achieve an overlay animation appearing upon hovering my images in a gallery grid. Something like when you hover the cursor over the images in the grid gallery and it turns dark with caption/title and you can click to a new page.

I can add a clickthrough URL, but it just displays my cursor changing into the clickable icon. No hover animation overlay whatsoever. Appreciate it!

Thanks

Link to comment
  • Replies 7
  • Views 844
  • Created
  • Last Reply

Hi.

The above link doesn't exist.

If anyone interested with this, add this code to Home > Design > Custom CSS

/* Gallery Grid hover effect - by tuanphan */
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
16 hours ago, lifeofpie said:

Hi @tuanphan — Will this work for a blog collection/masonry grid? If so, is there language I need to sub in for .gallery-grid-item everywhere it's written in your CSS code? 

The code for Gallery, not blog. If you need effect on blog page, please share link to blog page, we can check 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
  • 2 weeks later...
On 11/24/2020 at 8:49 PM, AlessiaTa said:

Hi @tuanphan , I am using your code which is very useful. Can you help me understand how to change it in order to make the caption text bigger ?

Also, is there a way to overlay buttons in a gallery slideshow ?

Thank you !

Have you solved it yet?

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.