Jump to content

Image Hover Effects

Recommended Posts

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? 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 years later...
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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.