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

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!

Hi,

What is site url?

11 hours ago, tuanphan said:

Hi,

What is site url?

@tuanphan lucas-studio.squarespace.com

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!!