Showing a different image on hover and removing effects for biography page

Site URL: http://lobster-finch-xh2g.squarespace.com

Hi there,

I need help with two things. This is my site: 

lobster-finch-xh2g.squarespace.com password: ilovedogs1234

For the people page, I am firstly looking to have the image of the person change upon hover (i.e) the person will show in black and white when loading the page and then the image changes to colour when its hovered on. What code do I need to do this?

Secondly, when clicking onto the person and the bioigraphy appearing, the colour picture on the right hand side seems to have adopted a zoom in effect that I can't figure out why?

The code i've entered is this:

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] {
    /* The rest of the styles remain here */
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] li.list-item {
    position: static;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .list-item-content__button-container {
    position: static;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] a.list-item-content__button.sqs-block-button-element {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .list-item-content__button-container {
    position: static !important;
    transform: unset !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .user-items-list-carousel__gutter {
    cursor: pointer;
}

Hope this makes sense!

12 hours ago, Freddi_F said:

Site URL: http://lobster-finch-xh2g.squarespace.com

Hi there,

I need help with two things. This is my site: 

lobster-finch-xh2g.squarespace.com password: ilovedogs1234

For the people page, I am firstly looking to have the image of the person change upon hover (i.e) the person will show in black and white when loading the page and then the image changes to colour when its hovered on. What code do I need to do this?

Secondly, when clicking onto the person and the bioigraphy appearing, the colour picture on the right hand side seems to have adopted a zoom in effect that I can't figure out why?

The code i've entered is this:

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] {
    /* The rest of the styles remain here */
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] li.list-item {
    position: static;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .list-item-content__button-container {
    position: static;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] a.list-item-content__button.sqs-block-button-element {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .list-item-content__button-container {
    position: static !important;
    transform: unset !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}

.user-items-list-item-container[data-section-id="6703ef82f1590279dba6c359"] .user-items-list-carousel__gutter {
    cursor: pointer;
}

Hope this makes sense!

Here is code for the first one. And for the second, I can't see any zoom effect on there. 

[data-section-id="6703ef82f1590279dba6c359"] .list-item:hover img {
    filter: grayscale(0) !important;
}