Card clipper

Html

<section class="section services">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-3">
                <a href="" title="">
                    <div class="card shadow">
                        <div class="inside">
                            <div class="card-image">
                                <picture>
                                    <img class="" src="imgage.jpg" alt="Image">
                                    <div class="icon iconrond is-xxlarge"><i class="fas fa-utensils fa-2x"></i></div>
                                </picture>
                            </div>
                            <div class="card-content">
                                <h2 class="is-size-5 has-text-centered color-1 is-uppercase mb-4">Titret</h2>
                                <div class="textwidget"><p>lorem ipsum .... </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

CSS

:root {
    --white: #ffffff;
    --black: #000000;
    --color-1: #066667;
    --color-2: #B39702;
}

.box,
.card {
    color: var(--main-text-color);
}

.carddot {
    border: var(--color-6) 2px dashed;
    padding: 10px;
    height: 100%;
    text-align: center;
}

a,
.content a {
    color: var(--link);
    transition: all 0.5s ease-in-out;
}

a:hover,
.content a:hover {
    color: var(--link-hover);
}

.shadow {
    box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    transition: all 0.2s ease-in-out;

}

.shadow:hover {
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    transform: scale(1.01);
}

.card {
    padding: 15px;

}

.card img {
    vertical-align: middle;
    display: inline-block;
    clip-path: ellipse(100% 55% at 48% 44%);
    overflow: hidden;
}

.card-content {
    padding: 1rem;
}

a:hover .card .iconrond {
    transform: scale(1.2);
    margin-top: -100px;
    margin-bottom: 70px;
    background: rgba(255, 255, 255, .5);
    border: var(--color-1) 8px solid;
    color: var(--color-1);
}

.iconrond {
    background: var(--color-1);
    color: var(--white);
    border-radius: 50%;
    border: #fff 8px solid;
    margin: -30px auto 0 auto;
    position: relative;
    display: block;
    text-align: center;
    padding-top: 14px;
    transition: all 0.5s 0s ease-in-out;
}

.icon.is-xxlarge {
    height: 5.5rem;
    width: 5.5rem;
}

.services .card {
    height: 100%;
}

.inside {
    height: 100%;
    background-color: #fff;
}

.textwidget {
    word-wrap: break-word;
}