Jump to content

Overlay thumb title, but underneath the project image as a hover action.

Go to solution Solved by tuanphan,

Recommended Posts

Hi there! 
Could someone please help me with a css code for my Avenue template. I would like for the thumbnail titles to work as a hover overlay per index image, but have the thumbnail title underneath the image instead of in/on it. 
Earlier I had received this code from @tuanphan

/* Test something */
.index-thumb-title-position-overlay #projectThumbs .project .project-title {
    transform: unset !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: unset !important;
    color: black !important;
    margin-top: 5px;
}

a.project {
    overflow: visible !important;
}

This did do the trick for having the thumbnail title underneath the image without it adding additional padding space underneath, but the hover action is not working here, neither is it perfectly centered per image.

Does anyone know what to add/substract from the code to make it work like a 'centered fading/showing when hovering' title underneath each project image. 

Thank You in advance!

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Can you send the link to the site?

Link to comment
  • Solution

Use this new code


/* Test something */
.hide-thumbnail-titles #projectThumbs .project .project-title {
    display: block !important;
    position: static !important;
    transform: unset !important;
    color: #000 !important;
    font-size: 20px !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: unset !important;
    margin-top: 5px;
}

.thumbnail-layout-autocolumns #projectThumbs .project .project-image .content-fill, .thumbnail-layout-autocolumns #projectThumbs .project .project-image .intrinsic {
    overflow: visible !important;
}
a.project {
    overflow: visible !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.