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: f.........完整代码请登录后点击上方下载按钮下载查看