If you’ve ever scrolled past a sleek Showit website and thought, “How did they make that preview scroll when I hover over it?”  you’re in the right place.

Creating a scroll-on-hover effect in Showit is one of those micro-interactions that instantly adds flair and functionality to your website. It feels modern, interactive, and elevates your portfolio or template shop from good to unforgettable.

In this guide, we’ll walk through exactly how to create a scroll-on-hover effect in Showit, even if you’re not a coder. It’s perfect for template designers, photographers, creative entrepreneurs, and anyone who wants to add subtle motion magic to their homepage, shop, or portfolio sections.

Ready to wow your visitors without overwhelming them? Let’s dive in.

What Is a Scroll on Hover Effect in Showit?

Before we get into the “how,” let’s talk about the “what.”

A scroll-on-hover effect is when a static image (often a screenshot of a full page or long section) slowly scrolls vertically when the user hovers their mouse over it. Once they move the mouse away, the image scrolls back to the top.

Why it’s great:

• Gives users a peek at a full page without opening a new tab
  
• Adds interactive flair to your site
  
• Works beautifully for template previews, portfolio items, or long homepage sections
  

Important Note: This effect is designed for desktop only, it does not translate well to mobile devices because of how hover interactions work (or don’t) on touchscreens.

Why Use This on Your Showit Site?

This hover effect isn’t just eye candy. It has real UX (user experience) and conversion benefits:

• Increases engagement – People love interactive elements.
  
• Improves template browsing – Users can preview full templates without clicking.
  
• Looks super professional – Helps your designs stand out in a crowded market.
  
• Reduces friction – No need to open 10 tabs just to preview your work.
  

Whether you’re a Showit template designer or showcasing your services, this trick adds that “custom-developed” feeling without any backend stress.

Read More: How to Add Shopify Buy Button to Showit

Step-by-Step Guide: How to Create a Scroll on Hover Effect in Showit

Let’s get hands-on. Here’s a complete breakdown with real steps and visuals.

Step 1: Prepare Your Design and Image

• First, design the scrollable content in a full-length layout. Export this as an image (JPG or PNG).
  
• It works best if your image represents the full vertical height of a long homepage, sales page, or portfolio layout.
  

Pro Tip: Keep the image width around 482px and height around 642px (or your preferred dimensions).

Step 2: Add an Embed Code Box in Showit

• In Showit, navigate to the section where you want to insert this hover effect.
  
• Add a new Embed Code Box (click the + icon, choose “Embed Code”).
  
• Position the box where you want the image to appear.
  
• Resize it to match your design dimensions; example: 482×642.
  

Learn More: Password Protect Showit Pages via WordPress

Step 3: Hide It on Mobile

Hover interactions don’t work well on mobile. So:

• With the Embed Code Box selected, go to the mobile view in Showit.
  
• Click “Hide on Mobile” in the toolbar.
  

Step 4: Embed the Scroll Effect Code

Copy and paste the following code into the Embed Code box:

<div class="scroll-containers">
  <div class="scroll-contents">
    <img src="https://static.showit.co/file/TvGf2_fy_oAQJCcCOEwVDQ/256146/baoubour.png" alt="Scrollable content">
  </div>
</div>
<style>
:root {
  --container-width: 400px;      /* Width of the visible area */
  --container-height: 530px;     /* Height of the visible area */
  --scroll-duration: 8s;         /* Time to scroll through entire image */
  --container-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Container shadow */
}
.scroll-containers {
  width: 400px;
  height: 530px;
  overflow: hidden;
  position: relative;
  border-radius: var(--container-border-radius);
  box-shadow: var(--container-shadow);
  cursor: pointer;
}
.scroll-contents {
  width: 100%;
  height: auto;
  position: relative;
  transition: transform 0.3s ease-out;
}
.scroll-contents img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* Prevents image dragging */
}
/* Hover effect */
.scroll-containers:hover .scroll-contents {
  animation: scrollAnimation var(--scroll-duration) linear;
  animation-play-state: running;
}
.scroll-containers:not(:hover) .scroll-contents {
  animation-play-state: paused;
}
@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + var(--container-height)));
  }
}
</style>
<script>

Replace: PASTE-YOUR-IMAGE-URL-HERE with your actual image link from your media library.

Step 5: Adjust the Image URL

• Go to your Media Library in Showit
  
• Upload your full-page screenshot if you haven’t already
  
• Copy the direct image link
  
• Paste it into the code above where it says PASTE-YOUR-IMAGE-URL-HERE
  

Step 6: Preview and Tweak

• Preview your Showit site
  
• Hover over the embed area
  
• You should see the image slowly scroll down
  
• Move your mouse away, and it scrolls back up!
  

Step 7: Change the Speed (Optional)

Want it to scroll faster or slower?
In the code, look for this line:
transition: background-position 12s linear;

Change 12s to another value (e.g., 8s, 15s, etc.) based on your preference

Pro Tip: Use the same scroll duration for both directions to maintain smoothness.

Learn More: Edit Hidden Text on Hover in Showit

Common Mistakes to Avoid

1. Not hiding the embed box on mobile
This can disrupt your mobile layout, as touchscreens cannot hover.

2. Image size mismatch
If your embed box and image don’t match in proportion, you might get weird clipping or layout issues.

3. Not updating the image URL
Don’t forget to copy the actual media library link, or the code won’t work.

4. Too-fast transitions
If it scrolls in under 3 seconds, users may not even notice it.

Other Creative Ways to Use This Effect

While this is most commonly used in Showit template shops, you can totally get creative with it:

• Photography portfolios: Show a full session scroll preview
  
• Long-form sales pages: Preview the entire page before clicking
  
• Branding case studies: Let users hover and explore without commitment
  

Read More: Flashing Callout Words Effect in Showit

SEO Benefits: Does This Help Your Website Rank?

Good question. While the scroll-on-hover effect itself doesn’t directly boost SEO, the user engagement it creates does help in indirect ways:

• Lowers bounce rate
  
• Increases time on site
  
• Enhances perceived professionalism/trust
  
• Encourages deeper clicks
  

All of these help send positive engagement signals to Google over time.

Bonus tip: Always pair visual interactions with strong alt text and descriptive captions when possible for accessibility and SEO.

FAQs About the Scroll On Hover Effect in Showit

Q: Does this work on mobile?
A: Nope – hover doesn’t work on touchscreens. Always hide the embed on mobile.

Q: Can I use GIFs instead?
A: You can, but they tend to be larger in file size and can slow your site.

Q: Can I use this on blog posts?
A: Not directly in blog content (since blogs are managed differently in Showit), but you can embed it on blog landing pages or custom-designed blog sections.

Q: What image format is best?
A: JPG for full-page previews (smaller file size), PNG if you need transparency.

Final Thoughts: Is It Worth Adding?

Absolutely.

This tiny touch of interactivity can:

• Instantly elevate your brand
  
• Improve browsing UX for potential clients or template buyers
  
• Make your site feel polished and professional
  

It’s easy to implement, completely no-code, and looks like something a fancy dev whipped up in ReactJS, but you did it yourself in Showit!

So if you’re ready to create a scroll-on-hover effect in Showit, grab your favorite template screenshot, copy the code above, and give your visitors something worth scrolling for.

Want More Showit Tutorials Like This?

At Get Perfect Website, we’re dedicated to helping creative business owners, photographers, and designers maximize the potential of Showit.

From no-code tricks to full-blown SEO guidance, we’re your behind-the-scenes BFFs.

Ready to level up your Showit game?

• Explore more Showit tutorials
  
• Join our email list for weekly hacks & resources
  
• Or get in touch for a 1:1 Showit Strategy Session