phosphor+fuse实现带关键字搜索过滤的图片瀑布流鼠标悬停显示文字代码-html代码-BFW代码库

代码语言：html

所属分类：瀑布流

代码描述：phosphor+fuse实现带关键字搜索过滤的图片瀑布流鼠标悬停显示文字代码

代码标签： phosphor fuse 关键字搜索过滤图片瀑布流鼠标悬停显示文字代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
  
<style>


body,
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--font-size-200);
  min-height: 100%;
  overflow-y: scroll;
  position: relative;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --font-size-200: 14px;
    --font-size-300: 16px;
    --font-size-400: 20px;
    --font-size-500: 24px;
    --font-size-600: 32px;
    --font-weight-light: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --rounding-200: 8px;
    --code-background: 0 0% 15%;
    --code-foreground: 0 0% 98%;
    --typographic-padding: 1rem;
    --typographic-quote-size: 1.5rem;
  }

  @media (min-width: 768px) {
    :root {
      --typographic-padding: 1.25rem;
      --typographic-quote-size: 2rem;
    }
  }

  @media (min-width: 1280px) {
    :root {
      --typographic-padding: 1.5rem;
      --typographic-quote-size: 2.5rem;
    }
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

.wrapper-masonry {
  position: relative;
}

.masonry-layout {
  box-sizing: border-box;
  display: grid;
  grid-gap: 1rem;
  padding: 0;
}

.masonry-layout.columns-1 {
  grid-template-columns: repeat(1, minmax(200px, 1fr));
}

.masonry-layout.columns-2 {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.masonry-layout.columns-3 {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.masonry-layout.columns-4 {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.masonry-layout.columns-5 {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
}

.masonry-layout.columns-6 {
  grid-template-columns: repeat(6, minmax(200px, 1fr));
}

.masonry-layout.columns-7 {
  grid-template-columns: repeat(7, minmax(200px, 1fr));
}

.masonry-layout.columns-8 {
  grid-template-columns: repeat(8, minmax(200px, 1fr));
}
.masonry-layout.columns-9 {
  grid-template-columns: repeat(9, minmax(200px, 1fr));
}

input {
  font-size: var(--font-size-300);
  border-radius: var(--rounding-200);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--rounding-200);
  background-color: var(--card);
  color: var(--card-foreground);
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.card:hover {
  /*   transform: scale(1.05); */
}

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

.card-info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.69);
  color: white;
  padding: var(--typographic-padding);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: baseline;
  opacity: 0;
  transition: opacity 0.2s;
  /*   backdrop-filter: blur(8px); */
}

.card:hover .card-info {
  opacity: 1;
}

.card .title {
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
}

.card .description {
  font-size: var(--font-size-200);
}

.card .description a {
  text-decoration: none;
}

.card .description a:hover {
  text-decoration: underline;
}

.typographic-card {
  padding: var(--typographic-padding);
  border-radius: var(--rounding-200);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.2s;
  width: 100%;
  box-sizing: border-box;
  min-height: 260px;
}

.typographic-name {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.typographic-quote {
  font-size: var(--typographic-quote-size);
  margin-bottom: 0.75rem;
  line-height: 1.18;
  display: -webkit-box;
}

.typographic-url {
  font-size: var(--font-size-200);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  opacity: 0.69;
}
</style>


  
  
</head>

<body translate="no">
  <div class="container mx-auto p-5">
  <div class="flex justify-between items-center mb-4">
    <div class="flex items-baseline">
      <h1 class="text-3xl font-semibold pr-2">Logo</h1>
      <h2 class="text-base font-normal opacity-70">  <a href="">HOME</a></h2>
    </div>
    <button id="signupButton" class="bg-transparent text-slate-700 font-semibold py-2 px-4 border 
    border-slate-500 rounded hover:bg-white hover:text-slate-900 hover:border-slate-500">
    ME
    </button>
  </div>
  <input type="text" id="search" class="p-4 border mb-4 w-full" placeholder="Search...">
  <div class="wrapper-masonry">
    <div id="masonry"></div>
  </div>
</div>

<!-- Modal -->
<div id="signupModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
  <div class="flex items-center justify-center min-h-screen p-4">
    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full p-8">
      <div class="bg-white">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-2xl font-semibold">Subscribe to Desigeist</h2>
          <button id="closeModal" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
        </div>
        <div id="mc_embed_shell">
          <div id="mc_embed_signup">
            <form action="" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
              <div id="mc_embed_signup_scroll">
                <div class="mc-fiel.........完整代码请登录后点击上方下载按钮下载查看