OUR TEAM SECTION WITH HOVER EFFECTS

IS IT POSSIBLE TO DO SIMILAR ON SQUARESPACE? IF YES, HOW CAN I DO?

https://webdesignerwall.com/wdw-snippet/our-team-section-with-hover-effects-2?fbclid=IwAR3lXA_eBKOuzjuJSOAQ4xXakFvoeeXPAMZraYSlnFjtut5XX8vezBxkzN4

You can add Poster Blocks, add text, then share link to page where you added, we can give code to make hover effect, same as example

13 hours ago, tuanphan said:

You can add Poster Blocks, add text, then share link to page where you added, we can give code to make hover effect, same as example

Okay let me do and send you

On 3/21/2023 at 9:49 AM, tuanphan said:

You can add Poster Blocks, add text, then share link to page where you added, we can give code to make hover effect, same as example

https://clownfish-calliope-cg9g.squarespace.com/

PASSWORD: 123456

here is the page and site. can you send me code

On 3/25/2023 at 11:04 PM, Saiman_Sakib said:

https://clownfish-calliope-cg9g.squarespace.com/

PASSWORD: 123456

 

here is the page and site. can you send me code

You want

Initial: show image, hide text

Hover: show image, show overlay, show text

Is that right?

21 hours ago, tuanphan said:

You want

Initial: show image, hide text

Hover: show image, show overlay, show text

Is that right?

yes you are right. Same like below

https://webdesignerwall.com/wdw-snippet/our-team-section-with-hover-effects-2?fbclid=IwAR3lXA_eBKOuzjuJSOAQ4xXakFvoeeXPAMZraYSlnFjtut5XX8vezBxkzN4

On 3/29/2023 at 8:30 AM, tuanphan said:

You want

Initial: show image, hide text

Hover: show image, show overlay, show text

Is that right?

any update?

On 3/29/2023 at 9:30 AM, tuanphan said:

You want

Initial: show image, hide text

Hover: show image, show overlay, show text

Is that right?

Add to Design > Custom CSS

/* Poster Image Hover */
.design-layout-poster:hover .image-overlay {
    background-color: rgba(255, 0, 0,0.9) !important;
    -webkit-mask-image: none !important;
}
.design-layout-poster figcaption {
    opacity: 0;
}
.design-layout-poster:hover figcaption {
    opacity: 1;
}

On 4/7/2023 at 2:51 PM, tuanphan said:

Add to Design > Custom CSS

/* Poster Image Hover */
.design-layout-poster:hover .image-overlay {
    background-color: rgba(255, 0, 0,0.9) !important;
    -webkit-mask-image: none !important;
}
.design-layout-poster figcaption {
    opacity: 0;
}
.design-layout-poster:hover figcaption {
    opacity: 1;
}

 

thanks