<!DOCTYPE html>

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Cards Uı</title>
    <link rel="stylesheet" href="style.css">
</head> 

<body>
    <div class="container">
        <div class="card">
            <div class="circle">
               <h2>01</h2>
             </div>
            <div class="content">
                <p>Lorem ipsum dolor, sit amet consectetur a
                    dipisicing elit. Laboriosam laudantium dolor
                     harum officiis. Nemo quidem vero eos assumen
                     da voluptatibus fuga eligendi, odit dolores re
                     prehenderit similique quo, aspernatur deserunt,
                      aliquid enim.</p>
                      <a href="#">Read More</a>
            </div>
        </div>

    </div>
</body>
</html>



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: rgb(10, 15, 48);
    background-attachment: fixed;
}
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 1150px;
    padding:20px
}

.container .card {
    position: relative;
    width: 320px;
    height: 420px;
    background: #fff;
    margin:20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    transition: 0.5s;


}

.container:hover .card {
filter:blur(20px);
transform: scale(0.9);
opacity: 0.5;

}
.container .card:hover {
    filter:blur(0px);
    transform: scale(0.1.1);
    opacity: 1;
    
    }

.container .card  .circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    clip-path:circle(180px at center 0);
    text-align: center;
}
.container .card  .circle h2 {
   color:#fff;
   font-size: 4.5em;
   padding: 30px 0;


}
.container .card  .content {
   position: absolute;
   bottom:10px;
   page-break-after: 20px;
   text-align: center;

 }
 .container .card .content p {
     color: #666;
 }
 .container .card .content a {
     position: relative;
     display: inline-block;
     padding: 10px 20px;
     background: #000;
     color:#fff;
     border-radius: 40px;
     text-decoration: none;
     margin-top: 20px ;
 }

 .container .card:nth-child(1)  .circle,
 .container .card:nth-child(1) .content a
 {
     background: #ffaf00;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.