css实现团队介绍悬停人物照片动画效果代码-html代码-BFW代码库

css实现团队介绍悬停人物照片动画效果代码

代码语言：html

所属分类：悬停

代码描述：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 {
	:root{
		--gallery-gap:10px;
		--gallery-text-color: white;
		
		/* indicator */
		--gallery-indicator-color: rgb(0 132 209);
		
		--gallery-indicator-hover-border: 1px solid var(--gallery-indicator-color);
		--gallery-indicator-hover-bg: oklch(from var(--gallery-indicator-color) l c h / 0.75);
		--gallery-indicator-hover-trans-duration: 300ms;
		--gallery-indicator-hover-trans-easing: ease-in-out;

		--gallery-img-border: 1px solid light-dark(rgb(11 11 11 / .25),rgb(255 255 255 / .5));
		--gallery-img-scale: .9;
		@supports not (corner-shape: notch) {
			--gallery-img-scale: .75;
		}
	}

	
	.wrapper {
		display: grid;
		grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    @media (width < 500px){
      grid-template-columns: 0fr 0fr;
    }
		gap: 0;
		/* psuedo element to.........完整代码请登录后点击上方下载按钮下载查看