Check this Fiddle, The <a> tag is above the div: https://jsfiddle.net/bardalesj/xoLzdem9/
Solution 1 :
Solution 2 :
Simply dont put the :after and the :before on the .image class because the one is on your div-element outside the -tag.
put it on the a-tag or the image tag like
.image a:before
The way you have it right now it only extends the styled click area of the div tag which is not part of the link
Do same with the :hover rules and stuff.
Solution 3 :
Just modify your html and add an onclick listener.
<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>
This solution is an alternative to using a link.
Problem :
I would like to be redirected to Google when I click on a picture but it doesnt work. I used <a href="https://www.google.com"> but somehow the it doesnt recognize it. Do you know what the problem is and how to solve it?
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;
}
Comments
Comment posted by John.P
Thank you. Your solution was the fastest
Comment posted by Helix
Or you could always move the