How to Make an Image a Link in HTML: A Step-by-Step Guide

Turning an image into a link in HTML is a great way to make your site nice and to improve its navigational structure. This post shows you how to achieve this.

How do you add a link to an image in HTML?

To add a link to an image in HTML, you need to enclose the <img> tag within an <a> tag. The href attribute of the <a> tag is used to specify the destination URL. Here’s the straightforward approach:

<a href="<https://www.example.com>">
  <img src="image-url.jpg" alt="Description of the image">
</a>

You're essentially turning the image into a clickable element that directs users to the specified URL, effectively adding a link to an image HTML style.

How to customize the behavior of the image link?

Customizing the behavior of your image link, such as making it open in a new tab, involves adding the target attribute with the value _blank to the <a> tag:

<a href="<https://www.example.com>" target="_blank">
  <img src="image-url.jpg" alt="Description of the image">
</a>

Now when users click on your image, they are led to a new tab, keeping your site open in the background.

How can you style the image link in HTML?

You can easily style image link with CSS. For subtle interactions like a hover effect, you might write:

<a href="<https://www.example.com>" style="border: none;">
  <img src="image-url.jpg" alt="Description" style="transition: transform 0.2s ease-in-out;">
</a>

And complement it with CSS for the hover effect:

a:hover img {
  transform: scale(1.05);
}

This will make the image slightly grow when hovered over, adding a sleek visual cue to your users.