Slideshow image - float and box shadow on hover

[jessanderson88]

Hey guys

I am currently looking for a way to apply CSS to my slideshow images.

I have applied a gradient image overlay, however I would also like a float and box shadow animation applied on hover.

Please refer to attached screen recording example.

Where you can find the CSS: https://www.instituteofcode.com/courses/web-dev-digital

Website URL: https://chris-rix-ayurveda.myshopify.com/
Password: ihifle

Your help would be largely appreciated!

Thank you
Jess

[oscprofessional]

@jessanderson88
Hello,

.featured-content--container{
   border-radius: 30px;
}

.featured-content--container:hover {
  box-shadow: 0 20px 25px -5px #0003,0 10px 10px -5px #0003;
  top: -5px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme-async.scss.liquid

Like This