Change text on hover on portfolio?

MagnusHenry · June 21

Hi!

As stated in the title, I'm trying to modify a portfolio section of my site. It is located here: https://www.magnushenry.se/uxwork

Now, I want to be able to modify the hover effect on this in order to make it clearer for the user when they're hovering on the selected project what kind of work that specific project covers, preferably in another font than the title of the project. So for example, if one were to hover the first project called "Ease of care: UX for better living" I want the hover effect to both say show the projects title, but I'd also want it's category show up, so it would for example say:

"Ease of care: UX for better living

UX/UI/Wireframing"

Is there any way to do this through custom code? The "Manage projects" section doesn't really help me with what I need, so I figured that if if there is a way it would hopefully be achievable through custom CSS.

Lesum · June 21

@MagnusHenry Hi! Portfolio pages don't include categories. However, We can add categories as a subtitle under the title using custom code. The custom code would need to be added for each portfolio item individually. If you're interested in trying this approach, I can write the necessary code to make it happen. Let me know your thoughts. Thank you!

Edited June 21 by Lesum

MagnusHenry · June 21

@Lesum That would be grand! As my website currently stands I've had to differentiate different portfolios, depending on if it's visual work or UX work. Being able to add subtitles to the title of the items would make my life so much easier! (And my website so much cleaner)

Lesum · June 21

@MagnusHenry I'll share the code with you shortly.

Lesum · June 21

@MagnusHenry Hi! To display the category text under the portfolio project title, add this code under Website > Pages > Website Tools > Custom CSS.

.portfolio-title:after {
    font-size: 12px;
    display: block;
    margin-top: 10px;
}

a.grid-item[href="/portfolio/project-one"] .portfolio-title:after {
    content: "replace with your category text";
}

First, replace "replace with your category text" in the code with your category name.

Second, you need to change the URL in the code. Navigate to your portfolio folder in the Squarespace editor for the individual project where you want to add the subtitle, then go to Settings > URL Slug. Copy the entire text under URL Slug and add it inside the href="/portfolio/project-one" in the code. See the screenshots,

Basically, you need to update the category name and project URL in the following block of code for each project. For example, for the project you mentioned in your post, the code should look like the following. You can add this block of code to see the effect.

a.grid-item[href="/uxwork/designing-a-digital-solution-for-faktum"] .portfolio-title:after {
    content: "UX/UI/Wireframing";
}

Let me know how it goes. Thanks!

MagnusHenry · June 22

@Lesum

Worked amazingly! I just had to add some @media responsiveness tweaks afterwards so that the scroll bar did'nt show up on smaller screen sizes. Thank you so much!

Change text on hover on portfolio?

Recommended Posts

MagnusHenry

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

MagnusHenry

Lesum

MagnusHenry

Lesum

Lesum

MagnusHenry

Create an account or sign in to comment

News

MagnusHenry

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources