JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex_row">

        <a class="flex_col" href="http://www.cnn.com">
            <div class="circle_shape">
                <i class="fas fa-sitemap"></i>
                <div class="circle_text">
                    <p>Load me some CNN!</p>
                </div>
            </div>
            <div>
                <h2>Beep!</h2>
            </div>
        </a>
        
       <a class="flex_col" href="http://www.cnn.com">
            <div class="circle_shape">
                <i class="fas fa-sitemap"></i>
                <div class="circle_text">
                    <p>Load me some ABC!</p>
                </div>
            </div>
            <div>
                <h2>BIP!</h2>
            </div>
        </a>
        
       <a class="flex_col" href="http://www.cnn.com">
            <div class="circle_shape">
                <i class="fas fa-sitemap"></i>
                <div class="circle_text">
                    <p>Load me some BBC!</p>
                </div>
            </div>
            <div>
                <h2>BOOP!</h2>
            </div>
        </a>
</div>

CSS

.flex_row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.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;
  }