Hover Box Style 3

HTML
CSS

HTML

<section class="hc-section">
    <div class="hc-container">
        <h3>Services Section</h3>
        <div class="hover-row">
            <!-- 1 -->
                <a href="" class="hover-item hover-1">
                    <div class="service-card">
                        <div class="img-div">
                        <div class="img-base">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/crown.png" alt="" class="img-hero">
                        </div>
                    </div>
                    <h3>UI/UX Design</h3>
                    </div>
                </a>
           <!-- 2 -->
                <a href="" class="hover-item hover-2">
                    <div class="service-card">
                        <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>
                        <h3>monitoring domowy ranking</h3>
                    </div>
                </a>
           <!-- 3 -->
                <a href=""class="hover-item hover-3">
                    <div class="service-card">
                        <div class="img-div">
                            <div class="img-base">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/rose.png" alt="" class="img-hero">
                            </div>
                        </div>
                        <h3>big data analytics</h3>
                    </div>
                </a>
           <!-- 4 -->
                <a href="" class="hover-item hover-4">
                    <div class="service-card">
                        <h3> maps seo optimization</h3>
                    <div class="img-div">
                        <div class="img-base">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/flower.png" alt="" class="img-hero">
                        </div>
                    </div>
                    </div>
                </a>
           <!-- 5 -->
                <a href="" class="hover-item hover-5">
                    <div class="service-card">
                        <h3>Web Design</h3>
                        <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>
                </a>
        </div>
    </div> 
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto';
}
.hover-row .hover-item {
    text-decoration: none;          
}
.hc-section{
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/08/hover-3-bg.png);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
}
.hc-container{
    width: 80%;
    margin: auto;
}
.hc-container h3 {
    text-align: center;
    font-size: 35px;
    color: white;
}
.hover-row {
    display: flex;
    width: 100%;
    margin: 100px auto 0;
    column-gap: 12%;
    flex-wrap: wrap;
    row-gap: 0;
    justify-content: center;
    max-width: 800px;
}
.hover-item {
    display: flex;
    width: 25%;
    border-radius: 100px 0 0 0;
    padding: 15px;
    aspect-ratio: 1/1;
    justify-content: center;
    align-items: center;
    transform: rotate(45deg);
    transition: 0.3s linear;
}
.hover-4,.hover-5{
    border-radius: 0 0 100px 0;
}
.service-card{
    transform: rotate(-45deg);
}
.img-div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.img-hero {
    max-width: 50px;
    aspect-ratio: 1/1;
    object-fit: contain;
}
.hover-row .hover-item h3{
    color: white;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-block: 10px;
}
.hover-1{
    border: 5px solid white;
    background: #5E21B9;
}
.hover-1:hover{
    border:5px solid #5E21B9;
    background: white;
}
.hover-1:hover h3{
    color: #5E21B9;
}
.hover-2{
    border: 5px solid white;
    background: #FF9D00;
}
.hover-2:hover{
    border: 5px solid #FF9D00;
    background: white;
}
.hover-2:hover h3{
color: #FF9D00;
}
.hover-3{
    border: 5px solid white;
    background: #00A9C1;
}
.hover-3:hover{
    border: 5px solid #00A9C1;
    background: white;
}
.hover-3:hover h3{
    color: #00A9C1;
}
.hover-4{
    border: 5px solid white;
    background: #16CA53;
    position: relative;
    top: -35px;
}
.hover-4:hover{
    border: 5px solid #16CA53;
    background: white;
}
.hover-4:hover h3{
    color: #16CA53;
}
.hover-5{
    border: 5px solid white;
    background: #FF3654;
    position: relative;
    top: -35px;
}
.hover-5:hover{
    border: 5px solid #FF3654;
    background: white;
}
.hover-5:hover h3{
    color: #FF3654;
}
.hover-item:hover{
    box-shadow: 0 0 15px 0 #fafab8;
}
@media(max-width:880px){
    .hover-item h3 {
        margin-block: 3px;
        font-size: 12px;
    }
    .hover-row {
        max-width: 565px;
    }
    .img-hero {
        max-width: 40px;
    }
}
@media(max-width:540px){
    .hover-row {
        max-width: 440px;
        column-gap: 5%;
    }
    .hover-item {
        width: 35%;
    }  
    .hover-1 {
        position: relative;
        top: 0;
        left: 55px;
    }  
    .hover-2 {
        position: relative;
        top: 115px;
    }
    .hover-3 {
        position: relative;
        top: 75px;
        left: 55px;
    }
    .hover-4 {
        position: relative;
        top: 190px;
    }
    .hover-5 {
        position: relative;
        top: 155px;
        right: 30px;
    }
    .hover-2, .hover-4{
        border-radius: 0 80px 0 0;
    }
    .hover-1, .hover-3, .hover-5{
        border-radius: 0 0 0 80px;
    }
}
@media(max-width:480px){
      .hover-row {
        margin-left: -20px;
          max-width: 310px;
        column-gap: 10%;
    }
    .hover-item {
        width: 45%;
    }
    .hover-2 {
        top: 105px;
        left: 0px;
    }
    .hover-3 {
        top: 80px;
        left: 54px;
    }
    .hover-4 {
        top: 185px;
    }
    .hover-5 {
        top: 160px;
        right: 25px;
    }
    .hover-4 .service-card, .hover-5 .service-card{
        display: flex;
        flex-direction: column-reverse;
    }  
    .hover-row .hover-item h3{
        font-size: 12px;
    }
    .img-hero {
    max-width: 30px;
    }
}