How To Use Web Image Effects To Draw Attention To Your Post

June 20, 2016

Do you know that people are captivated by visuals. In fact, it’s estimated that the human brain processes visual information (e.g., infographics, memes, vector graphics) 60,000x faster than plain text.

Visual marketing has come a long way. At Freepik, we are passionate about photos, logos, infographics, and several other visual assets – that can help business people, marketers, and designers convey their messages to the right audience. In this article, I want to show you how to use web image effects to draw attention to your post.

In case you’re having a hard time convincing your target audience and customers with written text alone, why don’t you try visuals. It’s time to dazzle your audience with striking image behaviors.

So, let’s quickly get started!

What are web image effects?

As the term implies, web image effects are basically unique behaviors or effects that a particular image or graphic shows.

For example, when you visit Freepik’s homepage and move your mouse pointer over the banners, the social share buttons will automatically appear.

That’s an effect.

Applying special effects to images have been around for years. It’s been used in photo manipulations – to alter or transform a photograph using various methods.

Oftentimes, photo editing software is used to achieve this result. But on the internet as we know it today, you don’t necessarily need an expensive software.

A professional image behavior can be achieved when you tweak a single line on your CSS code, javascript, JQuery, etc.

The focus of this article is to highlight some of the key areas on your website, where you can apply these image behaviors and as a result, draw more attention to your content.

1. Use homepage slider to hold people captive

Typical homepage sliders suck.

But with creativity and audience insights, you can effectively hold your audience captive with sliders.

Your site’s homepage may not be the most important page. Because, your target audience can discover your site through other pages – especially, when they come from Google search.

However, the homepage is the first page that either makes a positive impression or destroys your brand.

According to Norman Nielsen Group, “a company’s homepage is its face to the world and starting point for most user visits.”

Obviously, since the homepage is the first portal for building your personal and business brand, then, that makes it an important forefront as well.

Homepage slider has been around for years.

Recently, I’ve read several articles where the author advised readers to ditch automatic slider or carousal on their homepages.

I quite understand and agree with this to a large extent. But then, it all depends on the slider. It was the same situation with pop-up forms. People hated it, including site owners and visitors.

But today, popups are the most powerful and effective way to build an email list.

So, why not use relevant and engaging homepage slider instead?

Yes, you can. And you should.

Don’t forget that you can control posts and images that are shown in your homepage slider. This means that you can effectively promote your valuable posts, announce an upcoming product launch, or invite people to download your free report.

Matthieu Clauss, a freelance graphics designer uses slider on his website homepage to highlight three of his core services.

Entheosweb.com, a web and graphics design company, which has been in operation for a decade also uses sleek looking slider on its homepage.

The sliders are used to showcase templates, customer services, portfolio, resources, and low cost solutions.

Take a closer look:

2. Use a hoverable menu bar effect to excite your audience

Nobody wants to click a boring or dead menu bar.

You’ve got to create an exciting “clicking” experience for your site visitors. And it all begins with your menu bar.

Here’s an example of a boring menu bar you should avoid:

Listen up: Whenever you’re designing a website or choosing images to up the perceived value of your post, always remember the purpose: “To help people.”

In the same vein, your menu bar is critical. Stop seeing it as a clickable bar that helps people navigate your site.

Wait, you’re not totally wrong if you think that way.

But in addition to that, see your menu bar as a gateway for helping your site visitors and ideal customers find the right information that will change their lives.

If this becomes your driving force, the traditional static menu bar will not suffice.

Here’s what I recommend, which is equally easy to implement: Use a hoverable menu bar effect to create excitement in your site users. Ideally, use drop-down menu to organize your items.

This simply means that when people hover on your menu bar (e.g., services), the background color, text, or image should show a different behavior.

For example, when you hover on a menu bar at SmashingMagazine.com, the default gray buttons turns to yellow, and you’ll see a cartoon or mascot waving from the left side of the button.

The same image effect is present at contentmarketingup.com. As I hovered my mouse pointer on the “content marketing” menu bar, it changed color from black to cyan.

3. Add shrink effect to reveal clarity on images

If you’re familiar with CSS, you know that with blend modes and CSS filters, you can uniquely add special behaviors to your images.

One of those special behaviors you can add to images (e.g., an infographic) is to add shrink effect – to reveal some of illegible texts or data.

When users hover on the image, they can easily see all of the information – without straining their eyes.

Here’s an example of a shrinked image to reveal more details:

Bear in mind that you need to tweak your CSS code in the same manner if you want to grow (magnify) your image.

The only slight difference is that you need to reverse the effect and zoom the photo out. To grow the image, we use an image with a smaller size, and increase it. Here’s the tiny div tag:

</div>

And here’s the CSS code for the above div class:

Let’s get back to shrinking our image. Here’s the tiny div class tag:

</div>

And here’s the CSS:

Basically, when you’re shrinking an image, you start with a given size (say, 400px) and shrink it to 300px or lower on hover.

Remember that you can use image grow/shrink effect on your posts, pages, copy, online course, and homepage.

I talked about homepage slider earlier. The truth is, you can apply these effects to your slider images, too.

Conclusion

The goal of your homepage, other pages of your website and visuals is to guide, educate, inform, and compel visitors to dig deeper into your website.

You want to move people further down your funnel, not just with plain text (which sometimes is boring), but with visual assets such as infographics, icons, memes, images, etc.

Attention is a currency. If site users pay attention to your post, it means they have given you the most precious resource – TIME.

Don’t take it lightly. Maximize it.

As usual, I would love to hear from you. Which of these web image effects do you use on your website?

By Michael Chibuzor