di+css实现多个图片布局相册鼠标悬浮放大效果代码-html代码-BFW代码库

di+css实现多个图片布局相册鼠标悬浮放大效果代码

代码语言：html

代码描述：di+css实现多个图片布局相册鼠标悬浮放大效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
    body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 1px,
        light-dark(rgba(54 65 83 / .15),rgba(214 211 209 / .1)) 0 3px
      );
  
    background-size: auto 100%;
    pointer-events: none;
    z-index: -1;
  }
	/* bevel */
  :has(#shape-bevel:checked){
    .wrapper{
      --corner-type: bevel;
      --corner-type-center: bevel;
      --scale-center: .97; 
    }
  }
	/* round */
  :has(#shape-round:checked){
    .wrapper{
      --corner-type: scoop;
      --corner-type-center: round;
      --scale-center: .97; 
    }
  }
	/* notch */
  :has(#shape-notch:checked){
    .wrapper{
      --corner-type: notch;
      --corner-type-center: square;
      --scale-center: .97; 
    }
  }
  
	.wrapper {
    --min-col: 200px;
    --max-col: 400px;
    --gap: .5rem;
		
    --corner-type: notch;
    --corner-type-center: square;
    --scale-center: .94; /* the center item needs to be slighly smaller to balance the gaps */

    

		display: grid;
		grid-template-columns: repeat(
        auto-fit,
        minmax(clamp(var(--min-col), 25%, var(--max-col)), 1fr)
      );
		gap: var(--gap);
		&:has(:hover) > :not(:hover) > *{
      opacity: 0.5;
      z-index: -1;
      filter: grayscale(1);
    }

    & > ..........完整代码请登录后点击上方下载按钮下载查看