Why links are not clickable with an image that is not 100% opacity

Question

I created this little project to demonstrate my problem: https://codepen.io/jmdagenais/pen/bGegrEV

.content {
    max-width: 450px;
}

.image-wrapper {
    height: 135px;
}

.image-wrapper img {
    opacity: 25%;
}

.button-section {
    text-align: center;
}

<div class="content">
    <div class="image-wrapper">
        <img src="https://agilewarrior.files.wordpress.com/2014/04/cirlce-illustrator.png?w=500&h=480">
    </div>

    <div class="button-section">
        <a href="http://www.google.com" target="_blank">Google</a>
        <a href="http://www.github.com" target="_blank">Github</a>
    </div>
</div>

I have a similar situation on the website at my job. Links over an image that is not 100% opacity are not clickable.

If the opacity of the image is 100% the links are clickable.

Can somebody help me to fix this?

Answer 1

Position your anchors (or a container thereof) with position: relative will resolve your issue, but it will also stop your anchors being faded by the opacity CSS rule. I'm unclear if that's an intention or a side effect, but you can easily tweak your opacity CSS if needed.

.content {
    max-width: 450px;
}

.image-wrapper {
    height: 135px;
}

.image-wrapper img {
    opacity: 25%;
}

.button-section {
    text-align: center;
    position: relative;
    /* opacity: 50% if you need */
}

<div class="content">
    <div class="image-wrapper">
        <img src="https://agilewarrior.files.wordpress.com/2014/04/cirlce-illustrator.png?w=500&h=480">
    </div>

    <div class="button-section">
        <a href="http://www.google.com" target="_blank">Google</a>
        <a href="http://www.github.com" target="_blank">Github</a>
    </div>
</div>