I have a flex container that contains multiple items. Instead of using the anchor tag to enable a link when clicked, I am setting the flex item class inside it.
The element is comprised of three divs: The first div is a circle with an icon, the "second" div utilizes the ::before pseudo-element to add dimensionality to the circle, and the third div displays text when hovered over.
The problem arises when hovering over the element as it prevents the ability to click on the follow-on link. My assumption is that the anchor is being covered by the divs.
Despite attempting to set z-index values across elements, the anchor does not reveal 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 NEWS 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/honeynutzz/czq9y5fp/4/
Upon clicking the link mentioned, the expected behavior is for CNN's website to load. However, no action is taken upon clicking the link.