How to add microinteractions on your website images that are links, the easiest way, without having to add more images?

UltimateWB website builder has built-in microinteractions for the navigation menu and links via hover effects. You can set the mouseover color and background colors easily via your website admin panel Styles Manager. If you would like to add microinteractions to your image links as well, you can do that with UltimateWB too – it is very flexible and customizable. Let’s dive in the easiest way to do it! Spoiler: it’s via CSS!

Adding Microinteractions to Your Linked Images: The Easy Way

Microinteractions are subtle but powerful design elements that can greatly enhance the user experience on your website, for accessibility too. They provide visual feedback and interactivity, making your site more engaging. One effective way to implement microinteractions is by enhancing your linked images without having to add more images. This way you don’t take up extra space on your web hosting and can also still keep your website sleek and fast loading. In this blog post, we’ll explore the easiest way to do just that.

What Are Microinteractions?

Before we dive into the “how,” let’s clarify what microinteractions are. Microinteractions are small animations or changes in response to a user’s actions. They can include hover effects, button animations, or any subtle modification to a user interface element. In our case, we’ll focus on enhancing linked images with hover effects.

The Easy Way: Using CSS

To add microinteractions to your linked images without introducing additional images, we’ll use CSS. CSS (Cascading Style Sheets) allows you to control the presentation and layout of your web content. Here’s a step-by-step guide on how to do it with UltimateWB website builder.

1. HTML Structure

Start with the HTML structure. You need an image that’s also a link. Here’s an example:

HTML – find this code on your Add/Edit Page; on the Page Editor Box, click on the HTML button to load the HTML.

<a href="your-link-url"> <img src="your-image-source.jpg" alt="Image Description" class="microinteraction-image"> </a>

You want to add a class to the image tag, i.e.: class=”microinteraction-image” – you can call the class whatever you want, just remember it for the next step.

2. Define CSS Rules

Next, create CSS rules to define the microinteraction. Here, we’re using a simple example of a hover effect that adds a slight shadow to the linked image:

CSS – on your UltimateWB built-in Styles Manager – jump to the bottom in the Extras section to add this coding to your website.

.microinteraction-image { transition: box-shadow 0.3s ease; /* Add a smooth transition effect */ } .microinteraction-image:hover { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Apply a box-shadow on hover */ }

Explanation

• We use the transition property to make the hover effect smooth. When you hover over the image, it will transition the box-shadow property over 0.3 seconds with ease.
• The box-shadow property adds a subtle shadow to the image when hovered over. It creates a microinteraction that provides feedback to users.

Customize

Feel free to customize the CSS rules to fit your design and microinteraction preferences. You can change the shadow color, size, and other properties to achieve the desired effect.

Let’s explore a few more examples of CSS-based microinteractions you can apply to linked images on your website:

1. Change Hue on Hover

You can change the hue of the image when a user hovers over it. Here’s the HTML and CSS for a hue change microinteraction:

HTML – find this code on your Add/Edit Page; on the Page Editor Box, click on the HTML button to load the HTML.

<a href="your-link-url"> <img src="your-image-source.jpg" alt="Image Description" class="hue-change-image"> </a>

CSS – on your UltimateWB built-in Styles Manager – jump to the bottom in the Extras section to add this coding to your website.

.hue-change-image { transition: filter 0.3s ease; /* Add a smooth transition effect */ } .hue-change-image:hover { filter: hue-rotate(90deg); /* Rotate the hue by 90 degrees on hover */ }

This will make the image’s colors shift when you hover over it, creating a dynamic visual effect.

2. Rounded Background on Hover

To add a rounded background around the image when hovered, you can use CSS for a circular background effect:

HTML – find this code on your Add/Edit Page; on the Page Editor Box, click on the HTML button to load the HTML.

<a href="your-link-url" class="rounded-bg-link"> <img src="your-image-source.jpg" alt="Image Description" class="rounded-bg-image"> </a>

CSS – on your UltimateWB built-in Styles Manager – jump to the bottom in the Extras section to add this coding to your website.

.rounded-bg-link { display: inline-block; overflow: hidden; }

.rounded-bg-image { transition: transform 0.3s ease, border-radius 0.3s ease; /* Add transitions for transform and border-radius */ }

.rounded-bg-link:hover .rounded-bg-image { transform: scale(1.1); /* Scale up the image */ border-radius: 50%; /* Make the border-radius circular on hover */ }

This creates a zoom-in effect and a rounded background around the image when you hover over it, making it more interactive.

3. Brightness Change on Hover

You can also adjust the brightness of the image when hovering over it. Here’s the code for a brightness change microinteraction:

HTML – find this code on your Add/Edit Page; on the Page Editor Box, click on the HTML button to load the HTML.

<a href="your-link-url"> <img src="your-image-source.jpg" alt="Image Description" class="brightness-image"> </a>

CSS – on your UltimateWB built-in Styles Manager – jump to the bottom in the Extras section to add this coding to your website.

.brightness-image { transition: filter 0.3s ease; /* Add a smooth transition effect */ } .brightness-image:hover { filter: brightness(1.2); /* Increase brightness to 1.2 on hover */ }

This will make the image appear brighter when you hover over it, giving a simple yet effective microinteraction.

Feel free to experiment and combine different CSS properties to create unique microinteractions for your linked images. The possibilities are endless, and you can adapt these examples to match your website’s design and style.

Why Microinteractions Matter

Microinteractions may be subtle, but they play a crucial role in user engagement. They provide feedback, guide users, and make your website feel more interactive and user-friendly, and accessible. Whether you’re emphasizing that an image is a clickable link or simply adding a touch of elegance to your site, microinteractions are a powerful tool.

By using CSS to create microinteractions on your linked images, you can enhance your website’s user experience without adding unnecessary complexity. It’s a simple and effective way to make your site more engaging and visually appealing. Give it a try and see the difference microinteractions can make on your website!

Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.

Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.