Portfolio block to display your portfolio of client websites, applications or photography on websites and landing pages.

Dependencies

  • Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Portfolio 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="portfolio-1 py-6 md:py-12">
        <div class="container px-4 mx-auto">

            <div class="md:flex md:-mx-4">
                <div class="px-4 md:w-10/12 xl:w-8/12 mx-auto text-center">
                    <h1 class="text-2xl md:text-4xl font-medium mb-4">Our Awesome Work</h1>
                    <p class="text-xl">The most important feature of FWR Blocks is that they are plug and play, reusable blocks of code that make frontend development extremely quick and easy.</p>
                </div>
            </div>

            <div class="md:flex md:flex-wrap md:-mx-4 mt-6 pt-6 md:mt-12">
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-1.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Lion - The King</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-2.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Tiger - The Runner</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-3.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Elephant - The Big Animal</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-4.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Monkeys</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-5.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Cranes</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 md:w-1/2 lg:w-1/3">
                    <div class="max-w-sm mx-auto mb-4">
                        <div class="portfolio-img relative rounded-lg overflow-hidden cursor-pointer">
                            <img src="//assets.free-website-resources.com/img/portfolio-6.jpg" alt="" class="max-w-full h-auto">
                            <div class="portfolio-hover flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 h-full transform scale-75 opacity-0 text-white transition-transform">
                                <i class="far fa-plus-square text-3xl"></i>
                            </div>
                        </div>
                        <div class="portfolio-meta text-center p-4 md:px-6">
                            <h5 class="text-lg font-medium">Squirrel</h5>
                            <p class="text-gray-600 uppercase">John Doe</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- /.portfolio-1 -->

    <!-- Scripts -->
</body>
</html>
// Variables
$primary: #5863f8;

// Custom CSS
.portfolio-img {
  .portfolio-hover {
    transform: scale(0.85);
    transition: opacity 0.5s, transform 0.5s;
  }

  &:hover {
    .portfolio-hover {
      background-color: rgba($primary, 0.7);
      opacity: 1;
      transform: scale(1);
    }
  }
}
.portfolio-img .portfolio-hover {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.portfolio-img:hover .portfolio-hover {
  background-color: rgba(88, 99, 248, 0.7);
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvcG9ydGZvbGlvL3BvcnRmb2xpby0x