Не можете go перейти на связанную страницу при нажатии на картинку

Question

Я хотел бы быть перенаправлен в Google, когда я нажимаю на картинку, но она не работает. Я использовал <a href="https://www.google.com">, но почему-то не распознает его. Знаете ли вы, в чем проблема и как ее решить?

HTML

<div class="image-parent">
  <div data-content="Go to google" class="image fit">
    <a href="https://www.google.com"><img src="https://image.shutterstock.com/image-vector/abstract-orange-linking-dots-background-600w-334647518.jpg" alt="" /></a>
  </div>
</div>

CSS

.image:after, .image:before {
            position:absolute;
            opacity:0;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
        }
        .image:after {
            content:'\A';
            width:100%; height:100%;
            top:0; left:0;
            background:rgba(0,0,0,0.6);
        }
        .image:before {
            content: attr(data-content);
            width:100%;
            color:#fff;
            z-index:1;
            padding:30px 30px;
            top: 50%;
            transform: translateY(-50%);
            text-align:center;
            background:red;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            vertical-align: middle;
        }
        .image:hover:after, .image:hover:before {
            opacity:1;
        }

DEMO https://jsfiddle.net/5arxwq3k/

Answer 1

Проверьте эту скрипку, тег <a> находится выше div: https://jsfiddle.net/bardalesj/xoLzdem9/

Answer 2

Просто не помещайте: after и: before в класс .image, потому что он находится в вашем div-элементе вне -tag.

помещайте его в a-tag или тег image как

.image a:before 

То, как вы это делаете прямо сейчас, расширяет только стилизованную область щелчка тега div, который не является частью ссылки

Сделайте то же самое с правилами: hover и прочим.

Answer 3

Просто измените ваш html и добавьте прослушиватель onclick.

<div class="image-parent">
  <div data-content="Go to google" onclick="window.open('https://www.google.com')" class="image fit">
    <img src="https://image.shutterstock.com/image-vector/abstract-orange-linking-dots-background-600w-334647518.jpg" alt="" />
  </div>
</div>

Это решение является альтернативой использованию ссылки.