List Section Image Hover

Hi,

For a team page I need to the image of the list section to reveal text and a background colour. I have used the following CSS to achieve this:

section[data-section-id="652fa57ba5fa233481c325fb"] {
.list-item-content {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    opacity: 0;
}
ul.user-items-list-simple li {
    position: relative
}
ul.user-items-list-simple li:hover .list-item-content {
    opacity: 2;
    transition: 0.5s ease;
}
.list-item-content * { 
    max-width: 100% !important; 
}}

as well as

//-- List Color blend on hover 
.list-item:hover .list-image {filter: grayscale(0); opacity:.25}
.list-item-media-inner {background: linear-gradient(45deg, #F3FD01, #F3FD01)!important}

However this is also for other lists on the site, which do not need to reveal text on hover.

Anyway, my issue is that there is slight yellow border on the left of the photos when the page is loading and before the actual hover. I can't seem to get find the reason why this is happening. Is there anything I can do about this?

Thank you for any advice.

33 minutes ago, onika said:

Hi,

For a team page I need to the image of the list section to reveal text and a background colour. I have used the following CSS to achieve this:

section[data-section-id="652fa57ba5fa233481c325fb"] {
.list-item-content {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    opacity: 0;
}
ul.user-items-list-simple li {
    position: relative
}
ul.user-items-list-simple li:hover .list-item-content {
    opacity: 2;
    transition: 0.5s ease;
}
.list-item-content * { 
    max-width: 100% !important; 
}}

as well as

//-- List Color blend on hover 
.list-item:hover .list-image {filter: grayscale(0); opacity:.25}
.list-item-media-inner {background: linear-gradient(45deg, #F3FD01, #F3FD01)!important}

However this is also for other lists on the site, which do not need to reveal text on hover.

Anyway, my issue is that there is slight yellow border on the left of the photos when the page is loading and before the actual hover. I can't seem to get find the reason why this is happening. Is there anything I can do about this?

Thank you for any advice.

Can you share the page link?

Hi @Web_Solutions, here is the link https://yellow-design.squarespace.com/team and password is test123

Thank you

Fabulous! Thank you very much!