Image Hover Effects

Does anyone know how to create an image hover effect where upon hover, there is a solid background with text? 

Example: https://www.designhill.com

I don't need the icons or anything, just would like a color block with text upon hover. Is this possible with Squarespace css? Anyone have the code for it by chance? 

I think you can use CSS to do this

You can create image + caption first, then share url again, we can take a look.

On 1/28/2020 at 2:44 AM, tuanphan said:

I think you can use CSS to do this

You can create image + caption first, then share url again, we can take a look.

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!

On 2/6/2022 at 2:52 PM, chef_mateo317 said:

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!

The url doesn't exist. Can you check it again?

On 2/8/2022 at 5:43 AM, tuanphan said:

The url doesn't exist. Can you check it again?

sorry... i was updating the url... here is the correct one

https://playtekitchen2.squarespace.com/virtual-classes

password: foodiefun

On 2/12/2022 at 7:10 AM, chef_mateo317 said:

sorry... i was updating the url... here is the correct one

https://playtekitchen2.squarespace.com/virtual-classes

password: foodiefun

Don't remove any code in your current code. Add this to Design > Custom CSS

.design-layout-poster .image-card-wrapper {
    border-radius: 50% !important;
}

6 hours ago, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

.design-layout-poster .image-card-wrapper {
    border-radius: 50% !important;
}

 

That worked perfect! Thank you so much!