Adding CSS hover animations to your Showit site is a simple yet powerful way to make your designs more dynamic and engaging. Whether you’re emphasizing buttons, images, or icons, hover effects create a polished, interactive experience that grabs attention and keeps users engaged. And with Showit’s flexible setup for adding custom code, these animations are easier to implement than you might think!

In this post, we’ll explore three hover animations you can add to your next Showit project: button color swaps, image effects, and glowing icons. Along the way, I’ll show you exactly where to add code in Showit and explain why custom CSS is a game-changer for designers. Plus, if you want a shortcut, I’ve got a freebie packed with pre-coded hover buttons ready to use!

---

Where to add code in Showit

Before we dive into hover animations, let’s talk about how to add custom code in Showit. Whether you’re applying CSS, HTML, or JavaScript, Showit gives you several places to add code depending on what you’re trying to achieve.

1. Embed code boxes

For effects or tweaks that apply to specific elements or sections, use an Embed Code widget. Add it onto your canvas, open it, and paste your code inside. This method is perfect for adding hover animations to individual buttons, images, or icons.

2. Page settings for custom code

If your code needs to apply across an entire page, head to Page Settings > Advanced Settings. Here’s what you’ll find:

• Custom Head HTML: Add links to external stylesheets or custom CSS classes that should apply site-wide.
• Custom CSS: Use this section for page-specific styling and hover effects.
• Inline or Footer JS: Perfect for any JavaScript animations or interactive elements.

Once you know where to place your code, you can start experimenting with animations that make your designs ‘pop’.

---

Why adding custom CSS is a game-changer for Showit Web Designers

Showit’s drag-and-drop editor is powerful on its own, but custom CSS allows you to push your designs even further. With just a few lines of code, you can:

• Add animations and effects not available natively in Showit.
• Customize buttons, forms, and images to match your client’s brand identity perfectly.
• Create interactive elements that enhance the user experience and make your sites feel unique and professional.

Custom code also gives you an edge as a designer. Clients love polished websites with those “wow” moments, and CSS lets you deliver them with minimal effort. And if coding feels overwhelming? That’s where I come in – I’ll help you handle the techy stuff so you can focus on designing!

---

CSS hover buttons: Color swap effect

Gone are the days of combining text boxes and rectangles to make a button in Showit. With CSS, you can turn a simple text box into a fully functional, responsive button with hover animation. Here’s how to create a button that swaps its background and text colors on hover:

Step 1: Create your button in Showit

1. Add a Text Box in Showit, add your button text, and style it.
2. Go to Advanced > Custom CSS Class and assign it a class name (e.g. custom-button).

Step 2: Add the CSS

1. Go to Page Settings > Advanced Settings > Custom CSS.
2. Paste this code (remember to use your own class name):

.custom-button {  
  background-color: #2a9d8f; /* initial background */  
  padding: 10px 20px;  
  transition: all 0.3s ease; /* smooth animation */  
}  

.custom-button:hover {  
  background-color: #ffffff; /* hover background */  
  color: #2a9d8f; /* hover text color */  
}  

Now, when you hover over the button, the background and text colors will swap.

Want 10 ready-to-use CSS hover buttons for Showit? Download this freebie now!

---

Image hover effects: Bring static images to life

Hover effects aren’t just for buttons. Adding hover animations to images can help highlight clickable areas or draw attention to important elements.

Here are two CSS effects you can try:

Option 1: Scale up

Make your image grow slightly on hover:

.image-hover {  
  transition: transform 0.3s ease;  
}  

.image-hover:hover {  
  transform: scale(1.1); /* increases size by 10% */  
} 

Option 2: Add a border

Add a subtle border that appears when the image is hovered:

.image-hover {  
  border: none;  
  transition: border 0.3s ease;  
}  

.image-hover:hover {  
  border: 3px solid #e76f51; /* adds border */  
}  

To use these effects, assign the image-hover class to your image in Showit and paste the CSS into the Custom CSS section of the page settings.

---

Icon glow effect: Make SVGs shine

Want to add some flair to your icons? A glowing effect is an eye-catching way to highlight interactive elements like links or navigation icons. Here are two options for glowing SVG icons:

Option 1: Steady glow

.glow-icon svg {
  transition: filter 0.3s ease; /* Smooth transition */
}

.glow-icon:hover svg {
  filter: drop-shadow(0 0 15px #f4a261); /* Increase the glow on hover */
} 

Option 2: Pulsating glow

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px #f4a261); /* Start and end with a subtle glow */
  }
  50% {
    filter: drop-shadow(0 0 15px #f4a261); /* Stronger glow in the middle */
  }
}

.glow-icon:hover svg {
  animation: pulse 1s infinite; /* Apply the pulsing animation */
}  

Assign the glow-icon class to your SVG icons in Showit and paste the CSS into the Custom CSS section.

---

Need help adding code to your Showit site?

Slots for my White Label Partnerships are open!

Get personalized code sent straight to your inbox and skip the hassle of figuring it all out yourself. Let me help you!