.card {
            position: relative;
            overflow: hidden;
        }

        .card img {
            display: block;
            width: 100%;
        }

        .card::after {
            content: attr(data-name); /* Data-name attribute ko read karega */
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            opacity: 0;  /* Initially hidden */
            transition: opacity 0.3s ease-in-out;
        }

        .card:hover::after {
            opacity: 1;  /* Hover karne par show hoga */
        }