I have a similar question on my site: https://playtekitchen2.squarespace.com/new-page-2
password: foodiefun
I was able to add a hover to text effect at the bottom of the page using this code:
.design-layout-poster .image-card-wrapper {
visibility: hidden;
opacity: 0;
transition-duration: 1s;
}
.design-layout-poster:hover .image-card-wrapper {
visibility: visible;
opacity: 1;
background-color: rgba(240,240,240,.6)
}
My only issue is that when you hover over the images, the shape of the semi-transparent background is a square, but the images are circle. Is there anyway to change this? The dimensions of the images are all 717px x 717px.
BTW @tuanphan, Your posts have been SOOOOO helpful in figuring out how to code my first website! Thanks so much!