Hover Box Style 7

HTML

<section class="hc-7-section">
    <div class="hc-7-container">
        <h3 class="hc-7-hover-title">Services Section</h3>
        <h4 class="hc-7-hover-subtitle"> In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying</h4>
        <div class="hover-row">
            <!-- 1 -->
            <div class="hover-item">
                <a class="hc-7-hover-link" href="">
                    <div class="img-div">
                        <div class="img-base">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/flower-1.png" alt="" class="img-hero">
                        </div>
                    </div>
                    <div class="highlight"></div>
                    <h4 class="hc-7-card-header">UI/UX Design</h4>
                    <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                        without relying</p> 
                </a>
            </div>
           <!-- 2 -->
           <div class="hover-item">
            <a class="hc-7-hover-link" href="">
                <div class="img-div">
                    <div class="img-base">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/cocnut.png" alt="" class="img-hero">
                    </div>
                </div>
                <div class="highlight"></div>
                <h4 class="hc-7-card-header">Maps SEO Optimization</h4>
                <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                    without relying</p> 
            </a>
            </div>
           <!-- 3 -->
           <div class="hover-item">
            <a class="hc-7-hover-link" href="">
                <div class="img-div">
                    <div class="img-base">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/globe.png" alt="" class="img-hero">
                    </div>
                </div>
                <div class="highlight"></div>
                <h4 class="hc-7-card-header">Maps SEO Optimization</h4>
                <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                    without relying</p> 
            </a>
            </div>
           <!-- 4 -->
           <div class="hover-item">
                <a class="hc-7-hover-link" href="">
                    <div class="img-div">
                        <div class="img-base">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/flower-1.png" alt="" class="img-hero">
                        </div>
                    </div>
                    <div class="highlight"></div>
                    <h4 class="hc-7-card-header">UI/UX Design</h4>
                    <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                        without relying</p> 
                </a>
           </div>
           <!-- 5 -->
           <div class="hover-item">
            <a class="hc-7-hover-link" href="">
                <div class="img-div">
                    <div class="img-base">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/cocnut.png" alt="" class="img-hero">
                    </div>
                </div>
                <div class="highlight"></div>
                <h4 class="hc-7-card-header">Web Design</h4>
                <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                    without relying</p> 
            </a>
            </div>
           <!-- 6 -->
           <div class="hover-item">
            <a class="hc-7-hover-link" href="">
                <div class="img-div">
                    <div class="img-base">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/globe.png" alt="" class="img-hero">
                    </div>
                </div>
                <div class="highlight"></div>
                <h4 class="hc-7-card-header">Graphic Design</h4>
                <p class="hc-7-card-desc">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface 
                    without relying</p>                   
            </a>
            </div>
        </div>
    </div> 
</section>

CSS

.hc-7-container .hc-7-hover-title{
    text-align: center;
    font-family: 'Roboto';
    font-size: 32px;
}
.hc-7-container .hc-7-hover-subtitle{
    max-width: 70%;
    font-family: 'Roboto';
    color: #000;
    text-align: center; 
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 134.523%;
    margin: 20px auto 40px;
}
.hc-7-container .hover-row {
    display: flex;
    max-width: 70%;
    margin: auto;
    column-gap: 5%;
    flex-wrap: wrap;
    row-gap: 40px;
    justify-content: center;
}
.hc-7-container .hover-item {
    border: 2.7px solid transparent;
    display: grid;
    width: 23%;
    min-height: auto;
    border-radius: 27px;
    background: #FFF;
    padding: 15px;
    transition: 0.5s;
    align-content: start;
}
.hc-7-container .hc-7-hover-link {
    text-decoration: none;
    display: grid;
    padding: 10px;
}
.hc-7-container .hover-item:hover{
    border: 2.7px solid #FFE76F;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
     .highlight::before{
        left: 0;
        width: 80px;
        background: #FFE76F; 
        height: 15px;
    }
     .highlight::after{
        right: 0px;
        width: 80px;
        background: #FFE76F;
        height: 15px;
        
    }
}
.hc-7-container .highlight{
    width: 145px;
    height: 10px;
    border-radius: 8px;
    background: #EAEAEA;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.hc-7-container .highlight::before{
        content: '';
        position: absolute;
        height: 10px;
        width: 5px;
        top: 0;
        left: 73px;
        background: transparent;
        transition:  1s;
    }
.hc-7-container .highlight::after{
        content: '';
        position: absolute;
        height: 10px;
        width: 5px;
        top: 0;
        right: 73px;
        background: transparent;
        transition:  1s;
    }
.img-div{
    display: flex;
    justify-content: center;
    margin-block: 15px;
}
 .img-hero{
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.hc-7-container .hover-item .hc-7-card-header{
    color: #0C0705;
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 20px auto 10px;
}
.hc-7-container .hover-item .hc-7-card-desc{
    color: #0C0705;
    text-align: center;
    font-family: 'Roboto';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
}

@media only screen and (min-width:601px) and (max-width:1100px) {
    .hc-7-container .hover-item {
        width:40%;
    }
}

@media(max-width:600px){
    .hc-7-container .hover-item .hc-7-card-desc{
    font-size: 16px;
    }
    
    .hc-7-container .hover-item .hc-7-card-header {
        font-size:20px;
    }
    
    .hc-7-container .hover-row{
        display: grid;
        column-gap: 0%;
        grid-template-columns: 100%;
        max-width: 350px;
        margin-block: 3rem;
    }
    .hc-7-container .highlight {
        width: 105px;
    }
    .hc-7-container .hc-7-hover-subtitle{
        font-size: 15px;
        max-width: 100%;
    }
    .hc-7-container .hover-item{
        width: 95%;
        padding: 10px;
    border: 2.7px solid #FFE76F;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
     .highlight::before{
        left: 0;
        width: 80px;
        background: #FFE76F; 
        height: 15px;
    }
     .highlight::after{
        right: 0px;
        width: 80px;
        background: #FFE76F;
        height: 15px;
        
    }
}
}

Links

  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

     <link href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">