<style>

.container {
margin-top: -50px;
}


.content {
width: 1000px;
height: 900px;
position: relative;
}


.grid {
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
font-family: 'Pacifico';
font-size: 35px;
text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
font-weight: bold;
color: white;
grid-row-gap: 1rem;
position: relative;
}

.proj {
top: 35%;
position: relative;
color: rgba(255, 255, 255, 0.8);
transition: 0.3s;
}

.proj:hover {
color: crimson;
outline: 3px rgba(255, 0, 255, 0.3) solid;
background: rgba(216, 112, 147, 0.3);
box-shadow: 2px 2px 4rem rgba(156, 5, 5, 0.1), 0px 0px 4rem rgba(156, 5, 5, 0.3), 0px 0px 5rem rgba(156, 5, 5, 0.3);
-webkit-text-stroke: thin rgba(0, 0, 0, 0.4);
}

.circle_name{
width: 285px;
height: 285px;
text-align: center;
transition: 0.3s;
clip-path: circle(40%);
position: relative;
cursor: pointer;
}

.circle_name::before {
content: '';
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: url('imagegoeshere');
background-size: cover;
filter: blur(10px);
transition: 0.8s;
}

.circle_name:hover, .circle_name:hover::before {
filter: blur(0);
-webkit-filter: blur(0);
clip-path: circle(50%);
}

</style>


<div class="container">
    <div class="content">
        <div class="grid">
            <!-- ALL ITEMS GO HERE -->
            <div class="circle_name">
                <span class="proj">Circle Text</span>
            </div>
    </div>
</div>