Anchor fails to activate in flexbox item - html

Question

I have a flex container holding multiple items. I am setting the flex item class inside the anchor tag and trying to enable a link to work when a user clicks the anchored element.
The element is a 3 stage div... the first div is a circle with an icon, the "second" div (if you want to call it a second div...) loads the ::before psuedo element that loads some dimensionality to the circle. and the third div is a text item that appears when the item is hovered.
The issue is that when you hover over the element i am not able to click the follow on link. My guess is the anchor is being covered by the divs.
I have attempted setting z-index's across elements but cant seem to get the anchor to expose itself
HTML:
<div class="flex_row">
<a class="flex_col" src="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>CNN IS A TERRIBLE NEW SOURCE!</p>
</div>
</div>
<div>
<h2>CNN SUCKS</h2>
</div>
</a>
</div>
CSS:
.flex_col{
flex: 1;
margin: 10px;
}
.circle_shape {
position: relative;
display: flex;
padding: 50% 0;
border-radius: 50%;
overflow: hidden;
border: 1px solid gray;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.circle_shape:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
.circle_shape:hover{
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);
}
.circle_shape img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.circle_shape i{
position: absolute;
text-align: center;
font-size: 4vw;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape h2 {
position: absolute;
bottom: 10%;
font-size: 1vw;
font-weight: 800;
text-align: center;
}
.circle_text{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,51,102, 0.9);
border-radius: 50%;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.circle_text p {
color: #fff;
padding: 4px;
text-align: center;
font-size: calc(7px + .5vw);
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape:hover .circle_text{
transform: scale(1);
opacity: 1;
}
fiddle: https://jsfiddle.net/honeynutz/czq9y5fp/4/
I would expect the link in question to load cnn, but instead it does nothing.

Answer 1

The solution is actually very simple and I'm sure you'll kick yourself that you didn't spot it! I'm surprised it took me so long.
The issue is that you're using src on your anchor where you should be using href
More information on HTML Links