Hover background link & text alignment

Hi there, 

I've been trying to do something similar as the home page of this website https://www.taylorfreesolorees.com. 
So far I was able to do it but I'm encountering two issues that don't make the home page really friendly. 
1- I have been using the Hover: background which works perfectly but the link is only on the text and does not expand on the right side of the page. It also only do just a brighter white. Is there a way to have the link with the hover background go all the way on the right side and have the text with an underline or anything else that makes it more apparent?
2- I haven't been able to align the text and the logo on the home page. Is there a way to do that ? Design wise it doesn't look good.

Thank you 

Hi,

What is your site url? We can check easier

22 hours ago, tuanphan said:

Hi,

What is your site url? We can check easier

It's https://www.paulineallio.com

#1. You mean increase text width to make it touch right of screen?

#2. Align this?

9 hours ago, tuanphan said:

#1. You mean increase text width to make it touch right of screen?

#2. Align this?

#1- No Keeping the text as it is. Just having the change of the background image still happening if my mouse is on the right side of the screen and not to have to go over the text itself. In the website example I gave, you can see it clearly. 

#2 Yes align the logo and the text. Couldn't find a way on the edit page. 

You can add this code to Website Tools (under Not Linked) > Custom CSS

/* Portfolio customize */
.portfolio-hover-items {
    flex-direction: row !important;
    flex-shrink: 1 !important;
    margin: unset !important;
}

ul.portfolio-hover-items-list {
    padding: 0 !important;
}

ul.portfolio-hover-items-list {
    width: 100% !important;
}

.portfolio-hover-items-list li {
    width: 100% !important;
    flex-direction: column;
    text-align: left;
}

a.portfolio-hover-item {
    width: 100% !important;
}

On 10/5/2023 at 5:07 PM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

/* Portfolio customize */
.portfolio-hover-items {
    flex-direction: row !important;
    flex-shrink: 1 !important;
    margin: unset !important;
}

ul.portfolio-hover-items-list {
    padding: 0 !important;
}

ul.portfolio-hover-items-list {
    width: 100% !important;
}

.portfolio-hover-items-list li {
    width: 100% !important;
    flex-direction: column;
    text-align: left;
}

a.portfolio-hover-item {
    width: 100% !important;
}

 

Awesome Thank you ! 
It works perfectly !