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

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

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

 

 

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);
}

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);
}

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