Anchor tag not clickable within Bootstrap card-img-overlay

Question

I am trying to add some keyword tags to an image gallery comprised of Bootstrap cards. Everything is working as expected, except that the anchor tag-wrapped elements are not clickable.

The problem seems similar to this: href link inside modal is not working and this: Anchor links in bootstrap don't work But neither of the solutions in those cases seems to apply here. The problem seems to be with the "card-img-overlay" covering up the tags.

{% block page_content %}
<div class="container">
  <legend>Gallery</legend>
  <div class="row">
    {% set current_page=gallery_items_page %}
    {% for item in current_page.items %}
    {% if item.published == True %}
    <div class="col-4">
      <div class="card mb-3">
    <img style="width: 100%;" src="{{ url_for('images.static', filename=item.cover_picture[0].file_name) }}" class="img-fluid card-img" alt="responsive">
    <div class="card-img-overlay">
      <h1 style='font-family: "Miniver"' class="text-white">{{ item.title }}</h1>
    </div>
    <div class="card-header">
      {% for kw in item.keywords %}
      {# it's probably more efficient to use the PK, but more expressive to use the string... #}
      <a href="{{ url_for('search.search_keyword', keyword=kw.keyword) }}" class="badge badge-primary">{{ kw.keyword }}</a>
      {% endfor %}
    </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endblock %}

Using the inspect element tool on Firefox, it can be seen that the URL from the Jinja2 template works properly, and everything looks as intended, and the link itself works just fine, just it's not clickable. If I place the link outside of the the card div, it functions normally.

Here is a fiddle: https://jsfiddle.net/us4Lmqbp/

It's working properly. Please add a working snippet so we can have a look — Sai Manoj

stackingjasoncooper stackingjasoncooper · Accepted Answer · 2019-07-07T15:58:05

Your anchor tag is not clickable because it is under the div.card-img-overlay. So when you click, you are clicking on that div and not on the anchor tag. You can recognize this by right-clicking on the anchor tag in your browser and selecting "inspect". In the inspector window, the actual element clicked is selected.

To make the anchor tag clickable, you need to either:

Make the div "transparent" to clicking by giving it the style pointer-events: none (read more here). jsFiddle

or

Move the anchor tag above the div by increasing its z-index (add the style z-index: 20 and also add position: relative - z-index does not work on statically-positioned elements, which is the default browser style). jsFiddle

Anchor tag not clickable within Bootstrap card-img-overlay

1 Answers