How do I make an image work as a link when hovered?

user_14500547 0
Viewed 63

I am trying to make an image work as a link but the link doesn't work. I already know what the problem is but I've no clue how to fix it.

If you hover over the image with the cursor the image becomes slightly darker and a few words show up. I want the link to work once I am hovering over the image. If possible I want the link to work over the whole image and not only the text.

If I remove the dark overlay that shows up once you hover, the link works. But, how do I get it to work with the hovering action?

css html
1 Answers

I see you didn't add hyperlink, follow below the code.

html,

<div class="afbeeldingen_overons_contact">
    <a href="#" target="_blank" class="afbeelding_links">
        <img src="https://cdn.pixabay.com/photo/2020/09/07/11/57/stairway-5551641__340.jpg">
        <div class="info"><h2>Over ons</h2></div>
    </a>
</div>

I added pixabay for image

if you see the hyperlink clicking event not working you can add your after, before pseudo-element or any overlay tag pointer-events: none then your hyperlink works or if you don't want to use hyperlink tag 'a' you can do it by onclick attribute like onclick="open('http://')

user_116524010
Related