Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change).
I have then used an archive block to display these three categories to be filtered by.
What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below)
Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site).
Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white.
I am currently using this code (but it is not quite working properly):
.archive-group-name-link{
display: flex;
width: 100%;
}
.archive-group-name-link:after {
display: flex;
content: '';
width: 0px;
height: 1px;
transition: width .5s ease;
}
.archive-group-name-link:hover:after {
width: 100%;
background: black;
}
Any help or guidance on this would be very much appreciated.
I have attached some visuals below 🙂
Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog
Password: kokoloco