照片墙样式

十一月 15, 2023 / Mr.x / 1阅读 / 0评论/ 分类: 实用创意
照片墙样式 — 荣小站
前端 CSS 照片墙

照片墙样式

带有斜角剪裁和悬停特效的时尚照片墙布局。

效果演示
guitar player at concert
转换为带网格的时尚 HTML 和 CSS 布局。 — 照片库
duo singing crowd cheering singer performing singer fistbumping crowd
crowd cheering crowd in a concert woman singing
Person playing a cello Kiss playing young man singing
woman singing man playing drums
woman singing man playing drums
转换为带网格的时尚 HTML 和 CSS 布局。

这是一个极具视觉冲击力的 CSS 照片墙布局——带有斜角剪裁的网格画廊，悬停时图片放大且其他图片变暗，适合展示照片集、作品集等场景。

核心特性

  • 4列网格布局：使用 CSS Grid 实现响应式网格
  • 斜角剪裁：使用 clip-path 创建独特的图片形状
  • 悬停特效：悬停图片放大，其他图片变暗
  • 引用卡片：中间可插入装饰性文字卡片
  • 响应式设计：自适应不同屏幕尺寸

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

HTML

<article class="gallery">
  <img src="image1.jpg" alt="photo 1" />
  <blockquote class="quote spacer">
    <span>转换为带网格的时尚 HTML 和 CSS 布局。</span>
    <cite>— 照片库</cite>
  </blockquote>
  <img src="image2.jpg" alt="photo 2" />
  <img src="image3.jpg" alt="photo 3" />
  <!-- 更多图片 -->
</article>

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 0px 20px;
  width: clamp(70vmin, 900px, 90%);
}

.gallery:has(img:hover) img:not(:hover) {
  filter: brightness(0.35);
}

.gallery img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%);
  transition: clip-path 0.5s, transform 0.5s, filter 0.75s;
  transform: scale(1);
}

.gallery img:nth-child(3n):not(:nth-last-child(-n+4)) {
  grid-row: span 2;
}

.gallery img:hover {
  transform: scale(1.3);
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.5s, transform 0.5s, filter 0.5s;
}

.gallery .quote {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #eee;
  font-family: Montserrat;
}

@media all and (max-width: 700px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media all and (max-width: 500px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

技术要点

技术点说明
CSS Grid网格布局，4列布局，auto-rows 自动行高
clip-path多边形剪裁，创建斜角效果
:has() 伪类检测是否有图片被悬停
:not(:hover)选中未被悬停的元素
filter: brightness调整图片亮度
grid-row: span让特定图片跨行显示

使用说明

  1. 将完整代码保存为 .html 文件
  2. 替换图片路径为你的实际图片
  3. 用浏览器打开即可查看效果
  4. 悬停图片查看放大效果，其他图片会变暗

#照片墙样式(1)

评论