Enable Picture Mobile Hoover on Craft Theme 5.0.1

Hello guys,

I’d like to enable picture hoovering on mobile. It works fine for desktops but not for mobile. Is there a code I can add to my Crat 5.0.1 theme to enable picture hoove on mobile too?

My website is www.shoplile.com.au password: openshop2020

Thank you!

Hi @Tellmemore112

To enable picture mobile hover on Craft Theme, please follow these steps:

  • Find the file base.css

  • Find the @media screen and (max-width: 749px) section:

  • Add the following code inside the curly brackets of @media screen and (max-width: 749px) {}
.card:has(.full-unstyled-link:hover) .card__media .media {
    transition-duration: 1s;
    transform: scale(1.2)
  }
  • Here is the result before:

  • Here is the result after:

I hope that it will work for you.

Thanks for that! I meant to say hoover to second photo, apologies!

I’d like the hoovering feature to show the second picture. Is this possible?

Thank you. the first code did work but not exactly what I’m after.

Hi @Tellmemore112

Please follow these steps:

  • Find the file base.css:

  • Find @media screen and (max-width: 749px):

  • Remove the code below if any:
.card:has(.full-unstyled-link:hover) .card__media .media{
    transition-duration: 1s;
    transform: scale(1.2)
  }
  • Before:

  • After:

  • Find the file component-card.css:

  • Find @media screen and (min-width: 990px):

  • Move the code inside curly brackets @media screen and (min-width: 900px) {} out

  • Here is the code before:

  • Here is the code after:

I hope that it will work for you.

1 Like

Thank you! It worked :slightly_smiling_face:

1 Like