How to make individual links for Works to change colour when hover over - custom-css question (Hawley Template)

Site URL: https://www.ornamental-studio.com

Hi! 

I am curious if it is possible to change the color of the font of individual project link when hovering over. 

I found the post about similar problem, although the code changes the font colour of all the projects when hover on one of them :

At the moment I have a standard setting in the Hawley template.

Thanks in advance for helping!

Iza

On 8/12/2021 at 4:47 AM, Iza said:

Site URL: https://www.ornamental-studio.com

Hi! 

I am curious if it is possible to change the color of the font of individual project link when hovering over. 

I found the post about similar problem, although the code changes the font colour of all the projects when hover on one of them :

At the moment I have a standard setting in the Hawley template.

 

Thanks in advance for helping!

Iza

Hi,

Add to Design > Custom CSS

ul.portfolio-hover-items-list li:nth-child(1) * {
    color: red;
}

ul.portfolio-hover-items-list li:nth-child(2) * {
    color: green;
}

ul.portfolio-hover-items-list li:nth-child(3) * {
    color: blue;
}

On 8/14/2021 at 8:48 AM, tuanphan said:

Hi tuanphan, Thank you very much it helped a lot! I save this code and the links turned permanently: red, green and blue. 

But I added another pice of the code  with hover effect under, as I wanted the links to change colour form black to white when hover over. And it works 🙂 

ul.portfolio-hover-items-list li:nth-child(1) * {
    color: black;
}

ul.portfolio-hover-items-list li:nth-child(2) * {
    color: black;
}

ul.portfolio-hover-items-list li:nth-child(3) * {
    color: black;
} 

ul.portfolio-hover-items-list li:nth-child(1) :hover {
    color: white;
}

ul.portfolio-hover-items-list li:nth-child(2) :hover {
    color: white;
}

ul.portfolio-hover-items-list li:nth-child(3) :hover {
    color: white;
}

On 8/14/2021 at 8:48 AM, tuanphan said:

Add to Design > Custom CSS

ul.portfolio-hover-items-list li:nth-child(1) * {
    color: red;
}

ul.portfolio-hover-items-list li:nth-child(2) * {
    color: green;
}

ul.portfolio-hover-items-list li:nth-child(3) * {
    color: blue;
}

 

16 hours ago, Iza said:

But I added another pice of the code  with hover effect under, as I wanted the links to change colour form black to white when hover over. And it works 🙂 

 

ul.portfolio-hover-items-list li:nth-child(1) * {
    color: black;
}

ul.portfolio-hover-items-list li:nth-child(2) * {
    color: black;
}

ul.portfolio-hover-items-list li:nth-child(3) * {
    color: black;
} 

ul.portfolio-hover-items-list li:nth-child(1) :hover {
    color: white;
}

ul.portfolio-hover-items-list li:nth-child(2) :hover {
    color: white;
}

ul.portfolio-hover-items-list li:nth-child(3) :hover {
    color: white;
}

 

You still need help or fixed all?

All fine tuanphan, thanks again!

I just added code as reference, if someone needs that function to work.