Jump to content

zoom hover effect for carousel images

Go to solution Solved by bycrawford,

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

2 minutes ago, buura said:

The password doesn't seem to work if you could double check it please?

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
2 hours ago, buura said:

Thank you! Here is the code:

.user-items-list-item-container {
.user-items-list-carousel__slide {
    pointer-events: initial;
}
li:hover img {
  transform: scale(1.5) !important;
  transition: 0.2s;
}
}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Thank you very much! can you also help me about the zoom out? One more thing, when I drag my cursor to the section, the effect recognizes the cursor from beginning of the border but I only want it to start from the images' borders. Is this possible?

 

Link to comment
  • Solution
1 hour ago, buura said:

Thank you very much! can you also help me about the zoom out? One more thing, when I drag my cursor to the section, the effect recognizes the cursor from beginning of the border but I only want it to start from the images' borders. Is this possible?

 

You can lower the scale value but this doesn't zoom out. Unless you mean something else?

If you mean make the zoom *back* out segment smooth, use this code:

.user-items-list-item-container {
.user-items-list-carousel__slide {
    pointer-events: initial;
}

li img {
  transition: 0.8s;
}

li:hover img {
  transform: scale(1.5) !important;
  transition: 0.2s;
}
}

And on your point about the hover value, I don't know sorry.

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
13 hours ago, bycrawford said:

You can lower the scale value but this doesn't zoom out. Unless you mean something else?

If you mean make the zoom *back* out segment smooth, use this code:

.user-items-list-item-container {
.user-items-list-carousel__slide {
    pointer-events: initial;
}

li img {
  transition: 0.8s;
}

li:hover img {
  transform: scale(1.5) !important;
  transition: 0.2s;
}
}

And on your point about the hover value, I don't know sorry.

thank you very much!

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.