Jump to content

How to add hover effect to an image so that it rises up slightly or 'levitates'?

Recommended Posts

Site URL: https://www.dafidesign.co.uk/

I have two images that act as a way to select between two options. They both contain an anchor link to a contact form on the same page (below).

Could someone please provide the code to make each image 'levitate' slightly as a hover effect.

I found an example of this for grid summary blocks here:
https://www.ghostplugins.com/steps/quh49fn7  

Is this possible for an image?

Thanks
- Finn

 

 

91782115_Screenshot2021-03-31at23_21_34.thumb.png.ca6c25895925a4feb5ebad25e72d542c.png

Link to comment
55 minutes ago, dafi said:

Site URL: https://www.dafidesign.co.uk/

I have two images that act as a way to select between two options. They both contain an anchor link to a contact form on the same page (below).

Could someone please provide the code to make each image 'levitate' slightly as a hover effect.

I found an example of this for grid summary blocks here:
https://www.ghostplugins.com/steps/quh49fn7

Is this possible for an image?

Thanks
- Finn

 

 

91782115_Screenshot2021-03-31at23_21_34.thumb.png.ca6c25895925a4feb5ebad25e72d542c.png

try

section[data-section-id="604106273a03c437519c17db"] .sqs-block-image {
  transition: box-shadow .5s, transform .5s; 
}

section[data-section-id="604106273a03c437519c17db"] .sqs-block-image:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); 
  transform: translateY(-10px);
}

image.thumb.png.c67a853ebb52061d8024e9ee53baf618.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
11 hours ago, bangank36 said:

try


section[data-section-id="604106273a03c437519c17db"] .sqs-block-image {
  transition: box-shadow .5s, transform .5s; 
}

section[data-section-id="604106273a03c437519c17db"] .sqs-block-image:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); 
  transform: translateY(-10px);
}

image.thumb.png.c67a853ebb52061d8024e9ee53baf618.png

 

Thank you so much for this! Really appreciate the help.

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.