Image Zoom Hover Effect in Showit

Have you ever wanted to add a little extra flair to your Showit website? A simple image zoom effect on hover can instantly make your site feel more dynamic and engaging. The best part? It only takes a few easy steps, and you don’t need to know any code!

Showit’s incredible drag-and-drop functionality makes designing stunning websites a breeze. But what sets Showit apart is its flexibility—allowing you to add custom code for even more customization when you need it. In this tutorial, you’ll learn how to add a smooth image zoom effect on hover using a bit of CSS. Let’s dive in!

Step-by-Step Guide: Adding a Zoom Image Hover Effect in Showit

Step 1: Select Your Image and Add a Class Selector

1. In Showit, select the image where you want the zoom effect.
2. On the right-hand side, click on the Advanced tab.
3. Under Class Selectors, click the plus (+) sign.
4. Type in zoom as the class name and click the check box to save.

💡 Pro Tip: The zoom class can be reused on any image where you want the same hover effect.

Step 2: Add the Custom CSS

1. Click on the page name where you want this effect.
2. On the right-hand side, under Advanced Settings, find Custom CSS.
3. Copy and paste the following code:

.zoom {
  overflow: hidden;
}

.zoom .se-img {
  transition: transform 0.5s ease;
  will-change: transform;
}

.zoom:hover .se-img {
  transform: scale(1.2);
}

What this code does:

• overflow: hidden; ensures that the zoom effect stays within the image container.
• transition: transform 0.5s ease; makes the zoom smooth.
• transform: scale(1.2); scales the image by 20% when hovered.

Step 3: Customize the Zoom Level

Want a different zoom intensity? Adjust the scale value:

• Slight Zoom: transform: scale(1.05);
• Moderate Zoom: transform: scale(1.2);
• Extreme Zoom: transform: scale(1.5);

You can use decimal increments like 1.1, 1.25, or 1.26 to get the exact zoom level you want. Simply tweak the scale() value and click Save and Preview to see the changes in real time.

Why Showit is Perfect for Design and Customization

Showit stands out because it offers the best of both worlds:

• Drag-and-Drop Simplicity: You don’t need to know any code to create a beautiful website.
• Advanced Customization: For those who want extra design freedom, Showit allows custom code injections like the one in this tutorial. This flexibility means you can fine-tune every aspect of your website’s design and functionality.

Whether you’re a designer who loves pixel-perfect details or a business owner looking for a straightforward design tool, Showit gives you all the options you need.

Final Thoughts

And that’s it! You’ve just added a stylish zoom hover effect to your Showit website. With just a few simple steps and a tiny bit of CSS, your images can now have that extra touch of interactivity.

If you found this tutorial helpful, be sure to explore the rest of the blog for more Showit tips and tricks. You’ll discover practical advice, advanced design techniques, and plenty of inspiration to help you create a website you’re proud of.

👉 Browse More Showit Tutorials Here

Have questions? Feel free to reach out. Happy designing!