Image with hyperlink - clickable area exceeds image

make background image clickable link
add link to background image html
add link to background image css
make image clickable css
css background image
css clickable link
html email background image clickable
clickable image html

I have an issue with the galleries on my WordPress website: each image in the gallery has a clickable area that exceeds the image. For example, if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content. I only want the hyperlink over the image itself, I don't want the image to open when clicking anywhere to the left or right of it. (example gallery: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)

Any help would be greatly appreciated.

Thank you!

Add this following to your css file,

.gallery-icon{
width: fit-content;
margin: auto;
}

How to use an image as a link in HTML?, How do I make a picture a clickable link on Facebook? Tutorial how to create a responsive image with clickable areas that scale correctly. In short, the whole thing is pretty simple: you need to turn your image into image map (image with clickable areas); you need to handle correct scaling of image with clickable areas (you need a plugin for that).

Hard to tell where the actual issue is without any code, use an anchor element wrapping the image perhaps? And adjusting the image to your required size.

<a href="www.twitter.com" target="_blank">
  <img class="image" src="https://helpx.adobe.com/uk/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" title="Butterfly">
</a>

CSS Trick: Turning a background image into a clickable link, And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links. The best thing is, these don't  From here, select “Load Image from Website” and paste the URL from your image. Create Your Hotspots. On the next page, you’ll be asked to draw boxes around the areas where you’d like to link. Click on the top left area of your first link. Then click on the bottom right spot where the box will end. A box should appear connecting the two

This CSS fixed it:

.gallery .gallery-icon img {
display: inline-block;
}

(suggestion from misorude in a comment to the question)

A Project Guide to UX Design: For user experience designers in the , The answer: image maps. With image maps, you can designate areas of an image to link to and display different pages when clicked. The easiest way to create  I'm trying to display the following image: where I what to cover all white dot with red dots. each dot is clickable and should toggle it's color on click (I'll use jQuery). My question: What is the best practice for cover all white dots (the main image) with red dots to look the same for all major browsers and in mobile-web pages ?

Applied Informetrics for Information Retrieval Research, aggregated so that documents exceeding a threshold value are retrieved. highlighted text or hotwords, or clickable areas within images, called image Clicking on the link will take the user from the originating node to the destination node. I’m working on an navigational menu for a WordPress site. The client wants to have icons that appear above the text links (and change with a :hover), so I’ve used background-image and height to add some space above the text, and have an icon that changes with a hover. The problem is that the only “clickable” part of the link is the text.

Dreamweaver CS4: The Missing Manual: The Missing Manual, Repeat steps 2–7 for each hotspot you wish to add to an image. to indicate that the graphic has a functional purpose—in this case, “I'm a link. Click me. graphic is more than just a pretty picture—it's a button that actually does something. To create clickable areas in an image, create an image map, with clickable areas. For example, on clicking a box, the different website opens and on clicking a triangle in the same image, a different website opens. The <area> tag defines an area inside an image-and nested inside a <map> tag. The following are the attributes:

The Many Ways to Link Up Shapes and Images with HTML and CSS , However, you can also control the shape of that region with different techniques, making sure the target for your click area exactly matches what's  This video explains how make an image hyperlink (clickable picture) while posting on forums. This video explains how make an image hyperlink (clickable picture) while posting on forums.

Comments
  • First of all, please go read How to Ask and meta.stackoverflow.com/q/254428/10283047.
  • display: inline-block for the a around the img element fixes most of the problem already. If the remaining "linked" space beneath is a concern as well, then you need to remove the margin-bottom from the images, and put it somewhere else (like on the link, or the container element.)
  • Thank you @misorude, that worked and I updated the question with the solution. I was not aware of that rule but I understand it, thank you for pointing it out. However, in this case, I didn't have any actual code to post. I did, however, post the code that solved the issue in the question for anyone who might be interested. Thanks again! P.S. Could you post again as an answer so I can mark it as a solution?
  • Thank you, but that didn't work, though. I got an answer in the meantime, I've updated the question with the solution.
  • Thank you, but I got an answer in the meantime, I've updated the question with the solution.