!DOCTYPE html
html lang=en
head
    meta charset=UTF-8
    meta name=viewport content=width=device-width, initial-scale=1.0
    titleGIF Gallery with Hover Titlestitle
    script src=httpscdn.tailwindcss.comscript
    link href=httpsfonts.googleapis.comcss2family=Interwght@400;600;700&display=swap rel=stylesheet
    style
         Custom styles can be added here if needed, but we'll primarily use Tailwind 
        body {
            font-family 'Inter', sans-serif;  Using Inter font 
        }
        .project-item .project-title {
            transition opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
    style
head
body class=bg-gray-100

    header class=bg-white shadow-md sticky top-0 z-50
        div class=container mx-auto px-4 smpx-6 lgpx-8
            div class=flex items-center justify-between h-16
                div class=flex-shrink-0
                    a href=# class=flex items-center
                        img class=h-8 w-auto smh-10 src=httpsplacehold.co150x50000000FFFFFFtext=YourLogo&font=inter alt=Your Company Logo
                    a
                div

                nav class=hidden mdflex space-x-8
                    a href=#about class=text-gray-600 hovertext-indigo-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150About Usa
                    a href=#contact class=text-gray-600 hovertext-indigo-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-150Contacta
                    nav

                div class=mdhidden flex items-center
                    button id=mobile-menu-button class=inline-flex items-center justify-center p-2 rounded-md text-gray-400 hovertext-gray-500 hoverbg-gray-100 focusoutline-none focusring-2 focusring-inset focusring-indigo-500 aria-expanded=false
                        span class=sr-onlyOpen main menuspan
                        svg class=block h-6 w-6 xmlns=httpwww.w3.org2000svg fill=none viewBox=0 0 24 24 stroke=currentColor aria-hidden=true
                            path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M4 6h16M4 12h16m-7 6h7 
                        svg
                        svg class=hidden h-6 w-6 xmlns=httpwww.w3.org2000svg fill=none viewBox=0 0 24 24 stroke=currentColor aria-hidden=true
                            path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M6 18L18 6M6 6l12 12 
                        svg
                    button
                div
            div
        div

        div class=mdhidden hidden id=mobile-menu
            div class=px-2 pt-2 pb-3 space-y-1 smpx-3
                a href=#about class=text-gray-700 hoverbg-indigo-50 hovertext-indigo-700 block px-3 py-2 rounded-md text-base font-medium transition-colors duration-150About Usa
                a href=#contact class=text-gray-700 hoverbg-indigo-50 hovertext-indigo-700 block px-3 py-2 rounded-md text-base font-medium transition-colors duration-150Contacta
                div
        div
    header

    div class=container mx-auto p-4 smp-8 mt-4
        h1 class=text-3xl smtext-4xl font-bold text-center text-gray-800 mb-8 smmb-12Our Projectsh1

        div class=grid grid-cols-1 smgrid-cols-2 lggrid-cols-3 gap-6 smgap-8

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x400000000FFFFFFgiftext=Project+GIF+1
                     alt=Project 1 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105

                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Project Title One
                    h2
                div
            div

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x4003498DBFFFFFFgiftext=Project+GIF+2
                     alt=Project 2 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105
                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Creative Initiative X
                    h2
                div
            div

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x400E74C3CFFFFFFgiftext=Project+GIF+3
                     alt=Project 3 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105
                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Brand Evolution
                    h2
                div
            div

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x4002ECC71FFFFFFgiftext=Project+GIF+4
                     alt=Project 4 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105
                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Digital Experience
                    h2
                div
            div

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x400F1C40F000000giftext=Project+GIF+5
                     alt=Project 5 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105
                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Interactive Design
                    h2
                div
            div

            div class=project-item group relative rounded-lg overflow-hidden shadow-lg aspect-w-16 aspect-h-9
                img src=httpsplacehold.co600x4009B59B6FFFFFFgiftext=Project+GIF+6
                     alt=Project 6 GIF
                     class=w-full h-full object-cover transition-transform duration-300 ease-in-out group-hoverscale-105
                div class=absolute inset-0 bg-black bg-opacity-0 group-hoverbg-opacity-50 flex items-center justify-center transition-all duration-300 ease-in-out
                    h2 class=project-title text-white text-xl smtext-2xl font-semibold p-4 text-center opacity-0 group-hoveropacity-100 transform translate-y-4 group-hovertranslate-y-0
                        Motion Graphics
                    h2
                div
            div

        div
    div

    script
         JavaScript for mobile menu toggle
        const menuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const openIcon = menuButton.querySelector('svgnth-child(1)');  First SVG is open icon
        const closeIcon = menuButton.querySelector('svgnth-child(2)');  Second SVG is close icon

        menuButton.addEventListener('click', () = {
            const isExpanded = menuButton.getAttribute('aria-expanded') === 'true'  false;
            menuButton.setAttribute('aria-expanded', !isExpanded);
            mobileMenu.classList.toggle('hidden');
            openIcon.classList.toggle('hidden');
            openIcon.classList.toggle('block');
            closeIcon.classList.toggle('hidden');
            closeIcon.classList.toggle('block');
        });
    script

body
html