Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

bhua_2022 Level 4

bhua_2022

Posted
Posted

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.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources