Jump to content

Portfolio Page Titles - Add a Stretchy Line on Hover (7.1)

Go to solution Solved by tuanphan,

Recommended Posts

Hi there! 

On the Portfolio page, I'm wondering if it's possible to add the same hover animation as the navigation/header underneath the "View Project" line of each project?

This is the code I'm using for the hover navigation:

// Stretchy Navigation Line
.header-nav-item::after {
  content: '';
  background: #FFFFFF; //color
  height: 1px; //thickness
  width: 0;
  display: block;
  margin-top: 1px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

And then this is the CSS for the 2nd line of the Portfolio title "View Project" (the URL is then changed per project. 

a.grid-item[href="/projects/manhattan-beach"] h3:after {
    content: "View Project";
}
a.grid-item[href="/projects/manhattan-beach"] h3:after {
    content: "View Project";
}

I'm running into the issue that the code is similar in that the content: element overrides one another when trying to apply both to achieve the effect.

PW: LSI123!

Link to comment
  • Replies 4
  • Views 671
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Use this CSS for View project underline hover

h3.portfolio-title:before {
  content: "";
  background: black; 
  height: 1px;
  width: 0;
  margin-top: 1px !important;
  transition: width 1s;
  margin: 0 auto;
    position: absolute;
    bottom: 0;
}

h3.portfolio-title:hover:before {
  width: 100%;
}
h3.portfolio-title {
    display: inline-block;
    position: relative;
}

 

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
On 7/22/2023 at 9:35 PM, tuanphan said:

Use this CSS for View project underline hover

h3.portfolio-title:before {
  content: "";
  background: black; 
  height: 1px;
  width: 0;
  margin-top: 1px !important;
  transition: width 1s;
  margin: 0 auto;
    position: absolute;
    bottom: 0;
}

h3.portfolio-title:hover:before {
  width: 100%;
}
h3.portfolio-title {
    display: inline-block;
    position: relative;
}

 

@tuanphan Incredible. Thank you so much!!

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.